懸停的css或jquery只顯示當前div的隱藏子元素

以下是html結構，它在我的html頁面中重複出現。懸停的css或jquery只顯示當前div的隱藏子元素

<article class="tweet-inner"> 
    <div class="tweet"> 
     <div class="text"> 
      <p>Coming down! Time for Croation BBQ </p> 
     </div> 

     <p class="last"> 
      <span class="pull-right"> 
       <small> Hello this is first text </small> 
       <small> Hello this is second text </small> 
      </span> 
     </p> 
    </div> 
</article>

以上是我的HTML內部重複結構的一個單元。

我想要的功能是，當您將鼠標懸停在tweet文本上時，.tweet .text p則顯示.last的內容。

我做了以下內容：

.last{ 
    display: none; 
} 

.tweet .text p:hover .last{ 
    display: block; 
}

兩個疑惑：

你應該可以看到只有在你徘徊元素的.last。
以上不工作，小提琴是http://jsfiddle.net/EymLT/

謝謝！

來源

2013-08-17 user1629366

您的CSS選擇器不正確。首先.last不是.text的孩子，並且p元素不能被徘徊，因爲它是不可見的。試試這個：

.tweet:hover .last{ 
    display : block; 
}

Updated fiddle

來源

2013-08-17 14:14:43

麻煩的是，如果我徘徊在任何一個

元素上，所有'.last'元素都顯示出來。不是在小提琴中，而是在html中。 – user1629366

@ user1629366你確定你已經正確地複製了我的代碼，因爲這不會發生在我的示例小提琴中帶有2個'article'元素 –

這也不應該發生，因爲CSS選擇' .last'作爲懸停元素的孩子。你有一些JavaScript在某處徘徊嗎？ –

這個替換您的最後一個樣式：

.tweet .text:hover + .last{ 
    display : block; 
}

來源

2013-08-17 14:15:25

可以在CSS

DEMO http://jsfiddle.net/kevinPHPkevin/EymLT/4/

.last{ 
    display:none; 
} 

.text:hover ~ .last{ 
    display : block; 
}

使用

如果您將~替換爲>，它將更符合瀏覽器的要求。 >確保只有孩子被選擇，所以你可以使用父div作爲懸停目標。

.last{ 
    display:none; 
} 

.tweet:hover > .last{ 
    display : block; 
}

來源

2013-08-17 14:22:22 Vector

在所有瀏覽器中都能正常工作？ – user1629366

這種方法的麻煩在於，我在'.last'中有一些可操作的項目，當我將鼠標從'.text'中移除時，元素消失。 – user1629366

您希望元素在懸停時可見，您是否希望它仍然可見？ – Vector

懸停的css或jquery只顯示當前div的隱藏子元素

回答

相關問題