Question

I am using this as a button all over the site. The problem is if you hover over any “.contentViewMore” then it will do it for all of them on the site. Is there a way to fix this so it only effects one button at a time or a better way of doing this?

JQUERY

<script type="text/javascript">
  $(document).ready(function() {
$('.contentViewMore')
  .hover(function(event) {
 $('.contentViewMoreInfo').toggleClass('contentViewMoreInfoHover');
      });
  });
</script>

CSS

.contentViewMore{
width: 807px;
background: #e9e9e9 url('') left;
padding-left: 33px;
float: left;
line-height: 30px;
height: 30px;
color: #565656;
font-size: 10px;
font-weight: bold;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
  }
  .contentViewMore span{
width: 77px;
float: right;
padding: 0px 33px 0px 10px;
-moz-border-radius: 0px 3px 3px 0px;
-khtml-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
  }
  .contentViewMoreInfoHover {
background: #8eca45 url('') right;
 }

HTML

 <a class="contentViewMore" href="">
    More Posters Available.
<span class="contentViewMoreInfo">View More</span>
 </a>

Jsfiddle

Answer 1

It seems you want to match the .contentViewMoreInfo <span> element inside the hovered anchor. You can either use find():

$(".contentViewMore").hover(function(event) {
    $(this).find(".contentViewMoreInfo").toggleClass("contentViewMoreInfoHover");
});

Or the context argument to $():

$(".contentViewMore").hover(function(event) {
    $(".contentViewMoreInfo", this).toggleClass("contentViewMoreInfoHover");
});