CSS-在UL中的类中调用ID以在悬停时显示div

Question

HTML 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 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;
    }

I have a menu centered in the middle of the page with text links in an UL. 我在页面中间居中有一个菜单，带有UL中的文本链接。 What I'm trying to achieve is on hovering over one of the menu items, a div with information will appear up top. 我想要实现的是将鼠标悬停在菜单项之一上，带有信息的div将出现在顶部。 The original solution to this I found here (JS Fiddle). 我在这里找到了原始解决方案（JS Fiddle）。 If I try to achieve this outside of a div and UL, everything works. 如果我尝试在div和UL之外实现这一目标，那么一切都会正常。 As soon as I put the menu items in a div OR an UL, the CSS breaks. 一旦将菜单项放在div或UL中，CSS就会中断。 Am I calling the CSS selector correctly with the ".menu #wordsmith" part? 我是否可以通过“ .menu #wordsmith”部分正确调用CSS选择器？ Any help is appreciated! 任何帮助表示赞赏！ Keep in mind, I'm trying to do this strictly with CSS and html, not JS. 请记住，我正在尝试使用CSS和html而不是JS严格执行此操作。 Thanks. 谢谢。

Answer 1

AFAIK the are no predecessor or ancestor combinators/selectors so this is not possible in CSS. AFAIK不是前任或祖先的组合器/选择器，因此在CSS中是不可能的。 ~ is the general sibling combinator and #wordsmith and .wordsmith are not siblings, .wordsmith is a predecessor of an ancestor of #wordsmith . ~是一般的同级组合，而#wordsmith和.wordsmith不是同级， .wordsmith是#wordsmith祖先的#wordsmith 。
If you really need to do this you'll have to use JavaScript or re-factor your HTML. 如果确实需要执行此操作，则必须使用JavaScript或重构HTML。

Answer 2

demo - http://jsfiddle.net/n5fzB/229/ 演示-http: //jsfiddle.net/n5fzB/229/

with jQuery you can do this 使用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>

Answer 3

Musa is right, you can't target #wordsmith and do something with another element that isn't a sibling or child. Musa是对的，您不能以#wordsmith目标，并且不能使用不是兄弟姐妹或孩子的其他元素来做某事。 But you can do something else. 但是您可以做其他事情。 (disclaimer: I don't love using absolute positioning and I treat it as a last result) But if this has to be done with CSS only...you could put the text inside the li and use position:absolute to display it above like you wanted. （免责声明：我不喜欢使用absolute定位，我把它作为最后的结果）但是，如果这必须与CSS仅做......你可以把文本里面li和使用position:absolute上面显示它就像你想要的。 Check out the fiddle below to see what I mean: 查看下面的小提琴，了解我的意思：

HTML 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 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;
}

FIDDLE 小提琴

CSS-在UL中的类中调用ID以在悬停时显示div

问题描述

3 个解决方案

解决方案1
1 2014-12-25 15:22:16

解决方案2
0 2014-12-25 15:26:46

解决方案3
0 2014-12-25 16:27:44

CSS-在UL中的类中调用ID以在悬停时显示div

问题描述

3 个解决方案

解决方案1 1 2014-12-25 15:22:16

解决方案2 0 2014-12-25 15:26:46

解决方案3 0 2014-12-25 16:27:44

解决方案1
1 2014-12-25 15:22:16

解决方案2
0 2014-12-25 15:26:46

解决方案3
0 2014-12-25 16:27:44