adding and attribute to a class
Hello...
I would like to create a mouseOver event that adds an attribute to a class, so that this...
<div class="a">
<span class="1"><a title="Something" href="moo.asp" id="">Something</a></span>
<ul>
<li>
<a title="Anything" href="foo.asp"><span>Anything</span></a>
</li>
<li>
<a title="Other" href="foo.asp"><span>Other thing</span></a>
</li>
</ul>
</div>
<div class="b">
<span class="1"><a title="Something" href="moo.asp" id="">Something</a></span>
<ul>
<li>
<a title="Anything" href="foo.asp"><span>Anything</span></a>
</li>
<li>
<a title="Other" href="foo.asp"><span>Other thing</span></a>
</li>
</ul>
</div>
...ends up like this:
<div class="a">
<span class="1plus"><a title="Something" href="moo.asp" id="">Something</a></span>
<ul>
<li>
<a title="Anything" href="foo.asp"><span>Anything</span></a>
</li>
<li>
<a title="Other" href="foo.asp"><span>Other thing</span></a>
</li>
</ul>
</div>
<div class="b">
<span class="1plus"><a title="Something" href="moo.asp" id="">Something</a></span>
<ul>
<li>
<a title="Anything" href="foo.asp"><span>Anything</span></a>
</li>
<li>
<a title="Other" href="foo.asp"><span>Other thing</span></a>
</li>
</ul>
</div>
I know you can use css, i have tried already....I need a unique selector name.
I tried the following...
$(".a, .b").mouseover(function(){
$(".1").replaceWith(".1plus");
}).mouseout(function(){
$(".1plus").replaceWith(".1");
});
...but on mouseover, instead of the selector being replaced, the text "Something" is replaced by "1plus" in the resulting html.
Any advice would be appreciated, thanks
A