CSS-在UL中的類中調用ID以在懸停時顯示div
[英]CSS - calling an id within a class in an UL to show a div on hover
問題描述
HTML
<body>
<div class="wordsmith">
<p>WORDSMITH: dummy text here.</p>
</div>
<div class="menu">
<ul>
<li><a id="wordsmith">The Wordsmith</a></li>
<li><a id="tracksmith">The Tracksmith</a></li>
<li><a id="nerdsmith">The Nerdsmith</a></li>
<li><a id="family">The Family Man</li>
</ul>
</div>
CSS
.menu {
background: rgba(0,0,0,0.6);
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
text-align: center;
}
.wordsmith {
background: rgba(0,0,0,0.6);
max-width: 500px;
margin: 0 auto;
padding: 15px;
display: none;
}
.menu #wordsmith:hover ~ .wordsmith {
display: block;
}
我在頁面中間居中有一個菜單，帶有UL中的文本鏈接。 我想要實現的是將鼠標懸停在菜單項之一上，帶有信息的div將出現在頂部。 我在這里找到了原始解決方案（JS Fiddle）。 如果我嘗試在div和UL之外實現這一目標，那么一切都會正常。 一旦將菜單項放在div或UL中，CSS就會中斷。 我是否可以通過“ .menu #wordsmith”部分正確調用CSS選擇器？ 任何幫助表示贊賞！ 請記住，我正在嘗試使用CSS和html而不是JS嚴格執行此操作。 謝謝。
3 個解決方案
解決方案1
1 2014-12-25 15:22:16
AFAIK不是前任或祖先的組合器/選擇器，因此在CSS中是不可能的。 ~是一般的同級組合，而#wordsmith和.wordsmith不是同級， .wordsmith是#wordsmith祖先的#wordsmith 。
如果確實需要執行此操作，則必須使用JavaScript或重構HTML。
解決方案2
0 2014-12-25 15:26:46
演示-http: //jsfiddle.net/n5fzB/229/
使用jQuery，您可以執行此操作
$("#f").hover( function() { $('.ab').css('display', 'block'); $('.a').css('display', 'none'); }, function() { $('.ab').css('display', 'none'); $('.a').css('display', 'block'); } ); $("#s").hover( function() { $('.abc').css('display', 'block'); $('.a').css('display', 'none'); }, function() { $('.abc').css('display', 'none'); $('.a').css('display', 'block'); } );
.abc,.ab { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li><a id="f">Show First content!</a></li> <li><a id="s">Show Second content!!</a></li> </ul> <div class="a">Default Content</div> <div class="ab">First content</div> <div class="abc">Second content</div>
解決方案3
0 2014-12-25 16:27:44
Musa是對的，您不能以#wordsmith目標，並且不能使用不是兄弟姐妹或孩子的其他元素來做某事。 但是您可以做其他事情。 （免責聲明：我不喜歡使用absolute定位，我把它作為最后的結果）但是，如果這必須與CSS僅做......你可以把文本里面li和使用position:absolute上面顯示它就像你想要的。 查看下面的小提琴，了解我的意思：
HTML
<div class="menu">
<ul>
<li>
<a id="wordsmith">The Wordsmith</a>
<p>WORDSMITH: dummy text here.</p>
</li>
<li>
<a id="tracksmith">The Tracksmith</a>
<p>TRACKSMITH: dummy text here.</p>
</li>
<li>
<a id="nerdsmith">The Nerdsmith</a>
<p>NERDSMITH: dummy text here.</p>
</li>
<li>
<a id="family">The Family Man</a>
<p>FAMILY: dummy text here.</p>
</li>
</ul>
</div>
CSS
.menu {
background: rgba(0,0,0,0.6);
margin: auto;
position: absolute;
top: 100px; left: 0; bottom: 0; right: 0;
text-align: center;
padding: 100px 0 0;
}
.wordsmith {
background: rgba(0,0,0,0.6);
max-width: 500px;
margin: 0 auto;
padding: 15px;
}
.menu ul{
position: relative;
}
.menu li p{
display: none;
position: absolute;
top: -100px;
left: 0;
right: 0;
}
.menu li a:hover + p{
display: block;
}
在CSS上懸停顯示div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.