如何在CSS中的列表項上懸停時觸發div可見性？

我想隱藏一個div使用css屬性visibility: none當用戶懸停在列表項中的鏈接。如何在CSS中的列表項上懸停時觸發div可見性？

HTML

<div id="rightnav" class="navbar-header pull-right"> 
    <ul class="nav navbar-nav"> 
     <li><a id="home" href="." data-pjax="content">Works</a></li> 
     <li><a id="about" href="studio.php" data-pjax="content">Studio</a></li> 
     <li><a id="contact" href="formspree.php" data-pjax="content">Contact</a></li> 
     <div id="bar1"></div> 
     <div id="bar2"></div> 
     <div id="bar3"></div> 
    </ul> 
    </div>

有沒有一種方法來選擇ID爲 'bar_ *' 的div當用戶將鼠標懸停在純粹使用CSS的列表項（#home，#about，#contact）中的一個？我不反對使用jQuery/Javascript，只是試圖找出前進的最簡單方法&發現這個令人驚訝的棘手。

來源

2016-08-12 Androbaut

如果#bar是李的孩子是通過使用CSS的更容易，但你可以做到這一點jquery .. –

@NelsonTan jQuery不必要的，document.querySelector API可以完成與sizzle引擎相同的選擇器，並且內置於所有當前瀏覽器中。 – cchamberlain

哈哈，如果可能的話，我寧願堅持CSS！所以，只是爲了澄清：如果我想隱藏'bar1'，而不是使用CSS而只是將其懸停在#home上時，我應該將div包裹在li標籤中？ – Androbaut

這是用CSS很簡單試試這個小提琴鏈接：https://jsfiddle.net/xfz6x9wt/

ul{ 
height:30px; 
} 
ul li a { 

color:green} 

ul li a:hover { 
color:red; 
} 

ul li a:hover + div.hide{ 
color:red; 
visibility:hidden; 
} 

<ul><li><a href="#">hii</a> 
<div class="hide"> hide</div></li> 
</ul>

來源

2016-08-12 06:03:38 Friend

這是我最終使用的方法！謝謝！ – Androbaut

乾杯伴侶！ – Friend

您可以使用

Array.from(document.querySelectorAll('[id=^bar]')).forEach(x => x.style.visibility = 'hidden')

選擇具有ID開始吧所有元素。

MDN Source

來源

2016-08-12 05:50:53 cchamberlain

感謝您的建議，我擺弄了我的html佈局之後最終走向了純粹的CSS路線 – Androbaut

您可以使用加上懸停兄弟選擇。希望這是你在找什麼：

#rightnav div{ 
 
    background: red; 
 
    display: block; 
 
} 
 

 
#rightnav #bar1{ 
 
    background: red; 
 
} 
 

 
#rightnav #bar2{ 
 
    background: blue; 
 
} 
 

 
#rightnav #bar3{ 
 
    background: green; 
 
} 
 

 
li:nth-child(1):hover ~ div:nth-of-type(1){ 
 
    display: none !important; 
 
} 
 
li:nth-child(2):hover ~ div:nth-of-type(2){ 
 
    display: none !important; 
 
} 
 
li:nth-child(3):hover ~ div:nth-of-type(3){ 
 
    display: none !important; 
 
}

<div id="rightnav" class="navbar-header pull-right"> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a id="home" href="." data-pjax="content">Works</a></li> 
 
     <li><a id="about" href="studio.php" data-pjax="content">Studio</a></li> 
 
     <li><a id="contact" href="formspree.php" data-pjax="content">Contact</a></li> 
 
     <div id="bar1">Home</div> 
 
     <div id="bar2">About</div> 
 
     <div id="bar3">Contact</div> 
 
    </ul> 
 
    </div>

來源

2016-08-12 06:02:04 z0mBi3

謝謝！雖然我完全沒有使用這種方法，但您的答案幫助我更好地理解了我的選擇。 – Androbaut

試試這個：

爲了簡單起見，你可以像這樣重構你的html：

<div id="rightnav" class="navbar-header pull-right"> 
    <ul class="nav navbar-nav"> 
    <li> 
     <a id="home" href="." data-pjax="content">Works</a> 
     <div class="nav-content">Item-1</div> 
    </li> 
    <li> 
     <a id="about" href="studio.php" data-pjax="content">Studio</a> 
     <div class="nav-content">Item-2</div> 
    </li> 
    <li> 
     <a id="contact" href="formspree.php" data-pjax="content">Contact</a> 
     <div class="nav-content">Item-3</div> 
    </li> 
    </ul> 
</div>

CSS：

.navbar-nav li:hover .nav-content { 
    visibility: hidden; 
}

編號：http://jsbin.com/xekojel/edit?html,css,output

來源

2016-08-12 07:00:08

如何在CSS中的列表項上懸停時觸發div可見性？

回答

相關問題