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>

Answer 2

您可以使用CSS执行此操作：

.contentViewMore:hover .contentViewMoreInfo {
    background: #8eca45;
}

您的代码包含许多奇怪的内容，为什么要定位没有图像的背景，以及为什么首先设置url('')？

如果您想使用jQuery执行此操作，则必须执行此操作：

$(function(){ /* shorthand for $(document).ready(function(){ */

    $('.contentViewMore').hover(function(){

        $('.contentViewMoreInfo',this).toggleClass('contentViewMoreInfoHover');

    });

});

Answer 3

您似乎希望匹配悬停锚点中的.contentViewMoreInfo <span>元素。您可以使用find()：

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

或$()的context参数：

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

Answer 4

使用$('.contentViewMoreInfo')

而不是在悬停内使用$(this)

Jquery toggleClass影响所有

4 个答案: