Jquery的toggleClass影响所有

Question

我在整个网站上都使用它作为按钮。问题是，如果您将鼠标悬停在任何“.contentViewMore”上，那么它将为网站上的所有内容执行此操作。有没有办法解决这个问题，使其一次只影响一个按钮，或者有更好的方法吗？

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

尝试:

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