我正在为网站创建导航菜单...我正在使用css:hover函数将display标记从none更改为inline-block 。
我之前已经做了很多次,完全没问题。 但现在它似乎不起作用。
这是我最简单形式的代码:当.parent div元素悬停在上面时,应该出现.child div元素。
任何人都知道为什么不这样做?
a { text-decoration: none; color: #000; font-size: 20px; } .parent { width: 200px; height: 100px; background-color: #999; display: inline-block; } .child { display: none; width: 200px; height: 100px; background-color: #333; } .parent:hover .child { display: inline-block; }<a href=""> <div class="parent">Parent</div> </a> <a href=""> <div class="child">Child</div> </a>I'm creating a nav menu for a website... I'm using the css :hover function change the display tag from none to inline-block.
I've done this many times before with absolutely no problems. Now however it does not seem to work.
This is my code in its simplest form: When the .parent div element is hovered over, the .child div element is supposed to appear.
Anyone know why it's not doing that?
a { text-decoration: none; color: #000; font-size: 20px; } .parent { width: 200px; height: 100px; background-color: #999; display: inline-block; } .child { display: none; width: 200px; height: 100px; background-color: #333; } .parent:hover .child { display: inline-block; }<a href=""> <div class="parent">Parent</div> </a> <a href=""> <div class="child">Child</div> </a>最满意答案
尝试这个)
<a href=""> <div class="parent">Parent</div> </a> <a href=""> <div class="child">Child</div> </a> a { text-decoration: none; color: #000; font-size: 20px; } .parent { width: 200px; height: 100px; background-color: #999; display: inline-block; } .child { display: none; width: 200px; height: 100px; background-color: #333; } a:hover + a .child { display: inline-block; }直播 - https://jsfiddle.net/d26L7juy/
Try this)
<a href=""> <div class="parent">Parent</div> </a> <a href=""> <div class="child">Child</div> </a> a { text-decoration: none; color: #000; font-size: 20px; } .parent { width: 200px; height: 100px; background-color: #999; display: inline-block; } .child { display: none; width: 200px; height: 100px; background-color: #333; } a:hover + a .child { display: inline-block; }live - https://jsfiddle.net/d26L7juy/
更多推荐
发布评论