CSS3在悬停上显示其他元素 [英] CSS3 Display other element on hover

问题描述

我在这里尝试在悬停锚标记时显示列表项。 当div为时，如何影响其他元素hover - 尝试使用此帖子但我无法成功。

我在这里尝试使用纯CSS。

这里是 FIDDLE 。 / p>

以下是代码。

HTML：
$ b

 < div class =container> 
< div class =menu> 
< a class =userhref =＃> Brett< / a> 
< ul> 
< li> 
< a href =＃>设置< / a> 
< / li> 
< li> 
< a href =＃>退出< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
   

CSS ：

  body {
 font-size：50px; 
} 
 .container {
 margin-top：100px; 
 margin-left：200px; 
} 
 a {
 text-decoration：none; 
 / * color：#fff; * / 
} 
 .user {
 position：relative; 
 z-index：1000; 
 margin-left：-200px; 
} 
 ul {
 list-style：none; 
 position：absolute; 
 top：2％; 
 left：11％; 
 visibility：hidden; 
 opacity：0; 
} 
。菜单a：hover .menu ul {
 visibility：visible; 
 opacity：1; 
 -webkit-transition：visibility 1s，opacity 1s; 
 / * color：＃000; * / 
 / *  -  webkit-transition：color 1s; * / 
} 
  

解决方案

尝试使用邻近的兄弟姐妹选择器

.menu a：hover + ul 而不是 .menu a：hover .menu ul

jsFiddle演示

I'm here trying to display a list item on hovering an anchor tag. How to affect other elements when a div is hovered - tried using this post but I couldn't succeed.

I'm here trying this with only pure CSS.

Here's the FIDDLE.

And below is the code.

HTML :

<div class="container">
    <div class="menu">
        <a class="user" href="#">Brett</a>
        <ul>
            <li>
                <a href="#">Settings</a>
            </li>
            <li>
                <a href="#">Logout</a>
            </li>
        </ul>
    </div>
</div>

CSS :

body {
    font-size: 50px;
}
.container {
    margin-top: 100px;
    margin-left: 200px;
}
a {
    text-decoration: none;
    /*color: #fff;*/
}
.user {
    position: relative;
    z-index: 1000;
    margin-left: -200px;
}
ul {
    list-style: none;
    position: absolute;
    top: 2%;
    left: 11%;
    visibility: hidden;
    opacity: 0;
}
.menu a:hover .menu ul {
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility 1s, opacity 1s;
    /*color: #000;*/
    /*-webkit-transition: color 1s;*/
}

解决方案

Try using the adjacent siblings selector

.menu a:hover + ul instead of .menu a:hover .menu ul

jsFiddle Demo

这篇关于CSS3在悬停上显示其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！