css hover顯示單獨的隱藏元素

我試圖讓一些內容顯示，當我把鼠標懸停在鏈接上，只使用CSS - 你能爲我看看這個。我想我在正確的道路上，只需要一些明確的方向，請感謝您的幫助！css hover顯示單獨的隱藏元素

https://jsfiddle.net/JOSBORNE_/achmfszv/#&togetherjs=0o94SRwPsi

我想在本教程中看到重新創建這種類型的效果：

http://line25.com/tutorials/how-to-create-a-trendy-flat-style-nav-menu-in-css

最少的代碼示例：

#Link1 { 
 
    position: absolute; 
 
    text-align: center; 
 
    margin: -440px 0 0 9%; 
 
    width: 80%; 
 
    display: none; 
 
} 
 

 
.Link1:hover #Link1 { 
 
    display: block; 
 
}

<div class="menuforspecials"> 
 

 
    <li class="Link1"><a href="">Link 1</a></li> 
 
    <li><a href="">Link 2</a></li> 
 
    <li><a href="">Link 3</a></li> 
 
    <li><a href="">Link 4</a></li> 
 

 
</div> 
 

 
<li class="current" id="Link1"> 
 
    <h2>Offer Heading 1</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique in lacus ut vulputate. Nullam rhoncus, dolor quis euismod.</p> 
 
</li> 
 
<li id="Link2"> 
 
    <h2>Offer Heading 2</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique in lacus ut vulputate. Nullam rhoncus, dolor quis euismod.</p> 
 
</li>

來源

2017-03-15 JOSBORNE_

後您的[MCVE]你的問題吧。不要強迫我們去另一個網站查看您的代碼。它屬於這裏。 – j08691

您有一個非常基本的問題，懸停動畫只能影響錨標記內或附近的元素。 Plain css不允許你將鼠標懸停在鏈接上，並且如果它不符合上述接近要求，則會影響頁面下方的元素。

下面是可以做什麼的基本示例。

.content{ 
 
    display: none; 
 
} 
 

 
.menuforspecials a:hover + .content { 
 
    display: block; 
 
}

<div class="menuforspecials"> 
 

 
    <li class="Link1"><a href="">Link 1</a> 
 
    <div id="Link1" class="content"> 
 
     <h2>Offer Heading 1</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique in lacus ut vulputate. Nullam rhoncus, dolor quis euismod.</p> 
 
    </div> 
 
    </li> 
 
    <li><a href="">Link 2</a> 
 
    <div id="Link2" class="content"> 
 
     <h2>Offer Heading 2</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique in lacus ut vulputate. Nullam rhoncus, dolor quis euismod.</p> 
 
    </div> 
 
    </li> 
 
    <li><a href="">Link 3</a></li> 
 
    <li><a href="">Link 4</a></li> 
 

 
</div>

來源

2017-03-15 19:54:58

css hover顯示單獨的隱藏元素

回答

相關問題