javascript - 带有切换功能的 jQuery 悬停功能不起作用

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

将你的 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"); 
      }
   );
});

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

在这里试试:jsFiddle