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懸停功能，切換不起作用

回答

相關問題