Question

我有以下代码，它们应该切换div的背景和某些p并且它没有，我无法弄清楚原因。你能帮忙吗？

的jQuery

$(document).ready(function(){
    $("div.portfolio-img").hover(
        function(){
            $(this).toggleClass(".portfolio-img-hover");
            $(this).find("h5.excerpt-title").toggleClass(".excerpt-title-hover");
            $(this).find("p.portfolio-excerpt").toggleClass(".portfolio-excerpt-hover"); 
        }
      )
});

HTML

<div class="portfolio-img">
    <a href="#single_project"><img src="images/thumbnail.jpg"/></a>
    <h5 class="excerpt-title">First Title</h5>
    <p class="portfolio-excerpt">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum                Lorem ipsum Lorem ipsum</p>
</div>

CSS

h5.excerpt-title{
    margin:30px 0px 5px;
    transition:background-color 0.5s ease;
}

.excerpt-title-hover{
    opacity:1;
    color: #ed0b0b;
}

.portfolio-excerpt-hover{
    opacity:1;
    background:#e2e2e2;
}

.portfolio-img-hover{
    opacity:1;
    background:#e2e2e2;
    border-bottom:2px solid #ed0b0b;
}

.portfolio-img{
    width:220px;
    display:inline-block;
    padding:15px 5px;
    margin:0px 5px 10px;
    opacity:0.6;
    border-bottom:1px solid grey;
    transition:background-color 0.5s ease;
    background-color:#ffffff;
}

Jsfiddle：http://jsfiddle.net/a12b0u0k/

Answer 1

$(this).toggleClass("div.portfolio-img-hover");

div.portfolio-img-hover是一个选择器。你只想要portfolio-img-hover。

toggleClass会添加/删除您在()中放置的内容，并且您希望添加portfolio-img-hover而不是div.部分。

Answer 2

使用toggle类方法时，只应包含类名，如下所示。您还应将$(this)存储在变量中。

$(document).ready(function(){
  $("div.portfolio-img").hover(function(){
    var $this = $(this);
    $this.toggleClass("portfolio-img-hover");
    $this.find("h5.excerpt-title").toggleClass("excerpt-title-hover");
    $this.find("p.portfolio-excerpt").toggleClass("portfolio-excerpt-hover"); 
  })
});

此外，您希望确保“悬停”类样式低于CSS中的默认样式，并且您还应该包含原始选择器。

请参阅此处http://jsfiddle.net/a12b0u0k/1/

Answer 3

将您的jQuery更改为：

$(document).ready(function(){
   $("div.portfolio-img").hover(function(){
         $(this).toggleClass("portfolio-img-hover");
         $(this).find("h5.excerpt-title").toggleClass("excerpt-title-hover");
         $(this).find("p.portfolio-excerpt").toggleClass("portfolio-excerpt-hover"); 
      }
   );
});

并在您的{c}中的.portfolio-img-hover{}和portfolio-img{}上交换位置。

在此处试试：jsFiddle

jQuery悬停功能，切换不起作用

3 个答案: