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

我有下面的代码应该切换一个div和一些p的背景，它不，我不明白为什么。你能帮忙吗？jQuery悬停功能，切换不起作用

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/

来源

2014-09-23 Andra Vilcu

A）您需要删除标记，在切换类功能点。 B）你需要在查找功能中添加点：http://jsfiddle.net/a12b0u0k/1/ – 2014-09-23 20:47:57

改变你的jQuery这样的：在你的CSS您.portfolio-img-hover{}和portfolio-img{}

$(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"); 
     } 
    ); 
});

和交换的地方。

尝试一下这里：jsFiddle

来源

2014-09-23 20:55:25

嘿，所以我已经做到了，就像它在小提琴中，它不是很烦人，你知道为什么吗？谢谢，这里是小提琴 http://jsfiddle.net/tyfwvvnh/1/ – 2014-09-24 14:06:11

你的小提琴中没有jQuery。您可以将其添加到左侧菜单“框架和扩展”中。 – 2014-09-24 14:11:36

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

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

toggleClass将添加/删除您在()内部放置的任何内容，并且您想要添加portfolio-img-hover而不是div.部分。

来源

2014-09-23 20:47:25 Leeish

它仍然不能正常工作......你能在小提琴中向我展示它吗？ – 2014-09-23 20:51:45

当您使用切换类方法时，您应该只包含类名称，如下所示。您还应该将$(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/

来源

2014-09-23 20:53:29 animatedgif

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

回答

相关问题