jQuery的懸停功能不工作，不知道爲什麼

Question

我有以下的代碼是爲了顯示一個段落的內容，但它不工作：

jQuery的

<script> 
$(document).ready(function() { 
    $('.portfolio-excerpt').hover(function() { 
     $('.portfolio-text').addClass('portfolio-hover') 
    }, 
    function() { 
     $('.portfolio-text').removeClass('portfolio-hover') 
    }) 
}) 
</script> 

HTML

<div class="portfolio-img"> <a href="images/portfolio-big.jpg"><img src="images/thumbnail.jpg"/></a> 
    <p class="portfolio-excerpt">They say the only thing better.</p> 
    <p class="portfolio-text">Lorem ipsum</p> 
</div> 

CSS

.portfolio-hover { 
    display:block; 
} 
p.portfolio-excerpt { 
    display:block; 
    height:30px; 
    width:auto; 
} 
p.portfolio-text { 
    display:none; 
} 

這是不工作，我不知道爲什麼。你能幫我嗎？

Answer 1

所有你需要做的就是改變你的CSS聲明。

p.portfolio-text{ 
    display:none; 
    } 

p.portfolio-excerpt{ 
    display:block; 
    height:30px; 
    width:auto; 
} 

p.portfolio-hover{ 
    display:block; 
} 

這裏工作頁面 - >JSFIDDLE

你忘了.portfolio-hover之前添加p，只是把它的風格結束。就這樣。

Answer 2

試試這個：

$(document).ready(function() { 
    $('.portfolio-excerpt').hover(function() { 
     $(this).next().addClass('portfolio-hover') 
    }, 
    function() { 
     $(this).next().removeClass('portfolio-hover') 
    }) 
}) 

或者只是使用.show()和.hide()：

$(document).ready(function() { 
    $('.portfolio-excerpt').hover(function() { 
     $(this).next().show(); 
    }, 
    function() { 
     $(this).next().hide(); 
    }) 
}) 

Fiddle Demo

Answer 3

附上p標籤了特異性.class比tag.class那麼具體。

p.portfolio-excerpt { 
    display:block; 
    height:30px; 
    width:auto; 
} 
p.portfolio-text { 
    display:none; 
} 
p.portfolio-hover { 
    display:block; 
} 

另一種方法是從其他方法中刪除p，如果不需要的話。

此外，你可以因此它是一個更具體一點（使用多類）更新您的CSS：

.portfolio-text.portfolio-hover { 
    display:block; 
} 

您也可以通過使用important「逼」的。

.portfolio-hover { 
    display:block !important; 
} 

如果沒有那些將工作，重新考慮您的訂購（哎，有些人討厭important或.multi.classnames - 我得到的）。

最後，您可以使用toggleClass切換現有班級。

$(this).next().toggleClass('portfolio-text'); 

下面是一個例子：http://jsfiddle.net/neknhp8p/

Answer 4

的問題是CSS的樣式是如何應用的，在一個類的定義未覆蓋其他。改變像這樣的風格：

.portfolio-hover { 
    display:block !important; 
} 

或者，你可以更具體與選擇的定義：

.portfolio-text.portfolio-hover { 
    display:block; 
} 
/** OR **/ 
p.portfolio-hover { 
    display:block; 
} 

說明：

具有元素，其中class="classA classB"在CSS是：

.classA { 
    css-property: css-value1; 
} 

.classB { 
    css-property: css-value2; 
} 

將導致classA的css-property優先於classB's，因爲元素上的class屬性的排序。它通過以一種覆蓋另一種的方式實現風格來解決。 See here for more information on CSS precedence.

Answer 5

一些相關的事情 - 這是你的CSS。

第一順序：

.portfolio-hover { 
    display:block; 
} 
/* this comes later in the css, it will override the hover */ 
p.portfolio-text { 
    display:none; 
} 

所以修復它是這樣：

p.portfolio-text { 
    display:none; 
} 
.portfolio-hover { 
    display:block; 
} 

然而p.portfolio-text更具體的比.portfolio-hover所以仍然會被覆蓋 - 最終的解決方法是這樣的：

p.portfolio-text { 
    display:none; 
} 
p.portfolio-hover { 
    display:block; 
} 

Answer 6

請將這兩個段落與另一個div一起包起來消失將會平穩。

切換功能的變化顯示從none到block和block到none裏面sss DIV所有p標籤。

HTML：

<div class="portfolio-img"> <a href="images/portfolio-big.jpg"><img src="images/thumbnail.jpg"/></a> 
    <div class="sss"> 
     <p class="portfolio-excerpt">They say the only thing better.</p> 
     <p class="portfolio-text">Lorem ipsum</p> 
    </div> 
</div> 

JS：

<script> 
    $(document).ready(function() { 
     $('.sss').hover(function() { 
      $('.sss').children('p').toggle(); 
     }); 
    }); 
</script> 

CSS：

<style> 
.portfolio-hover, .portfolio-text { 
    display:block; 
} 
p.portfolio-excerpt { 
    display:block; 
    height:30px; 
    width:auto; 
} 
p.portfolio-text { 
    display:none; 
} 
</style>