I'm jquery in jquery and need to create a simple way to detect mouseenter, or hover elements with a same class.
I created a menu with four buttons, all with the same class, so I put the mouse over one of them giving an APPEND with a variable that adds two spans that will be effect masks.
Type like this:
<ul>
<li class="linkMenu"><a href="#" class="classeDoLink">Link1</a></li>
<li class="linkMenu"><a href="#" class="classeDoLink">Link2</a></li>
<li class="linkMenu"><a href="#" class="classeDoLink">Link3</a></li>
<li class="linkMenu"><a href="#" class="classeDoLink">Link4</a></li>
</ul>
And the CSS:
.linkMenu {
display: table;
padding: 10px 15px;
background: #900;
position:relative
}
.linkMenu a {
text-decoration: none;
color: #FFF;
font-size: 14px;
font-family: Arial, Sans-Serif
}
.spanMask1, .spanMask2 {
width: 100%;
height: 100%;
position: absolute;
}
.spanMask2 {
background: url(img.png) center center no-repeat;
z-index: 10;
}
.spanMask2 {
background: url(img2.png) center center no-repeat;
z-index: 20;
}
I can not add SPANS .spanMask2
and .spanMask2
independently within the button that the mouse is over. When the mouse is on top of one of them they all receive SPANS.