我想在下拉菜单中的列表项上悬停时显示图像,我不能完全按照我想要的方式单独使用 css,我想在悬停时在右侧显示图像左边对应的名字。
由于使用 css 时必须具有父子关系,所以到目前为止我编写的代码不起作用,我没有经验,所以也许解决方案真的很简单,如果是这样的话请原谅。
html:
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li class="current-item"><a href="#">Home</a>
</li>
<li><a href="#">Collaboratori</a>
<div class="sub-menu-collab">
<div>
<ul class="listanomi">
<li><a href="#">Paolo</a></li>
<li><a href="#">Luca</a></li>
<li><a href="#">Anna</a></li>
<li><a href="#">Mara</a></li>
</ul>
<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Paolo">
<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Luca">
<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Anna">
<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Mara">
</div>
</div>
</li>
</nav>
</div>
</body>
CSS:
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#3e3436;
}
.menu {
width:1000px;
margin:0px auto;
}
.menuimage {
float: right;
clear: none;
padding: 40px;
opacity: 1;
position: relative;
transition:all linear 0.15s;
}
.menu > .listanomi > li:hover .menuimage{
opacity: 1;
}
.listanomi {
float: left;
}
.menu li {
margin:0px;
list-style:none;
font-family: 'Playfair Display', serif;
text-transform: uppercase;
text-decoration: none;
}
.menu a {
transition:all linear 0.15s;
color:#a1a1a1;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#e8e8e8;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:16px;
text-decoration: none;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
text-decoration: none;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#2e2728;
text-decoration: none;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu-collab, .menu li:hover .sub-menu-mat, .menu li:hover .sub-menu-arte {
z-index:1;
opacity:1;
}
.sub-menu-collab {
width:150%;
padding:5px 0px;
position:absolute;
top:100%;
left:0%;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
text-decoration: none;
}
.sub-menu-collab li, .sub-menu-mat li, .sub-menu-arte li {
display:block;
font-size:16px;
text-decoration: none;
}
.sub-menu-collab li a, .sub-menu-mat li a, .sub-menu-arte li a {
padding:10px 30px;
display:block;
text-decoration: none;
}
.sub-menu-collab li a:hover, .sub-menu-mat li a:hover, .sub-menu-arte li a:hover {
background:#3e3436;
text-decoration: none;
}
.current-item a {
background:#3e3436;
}
jsfiddle 上的代码:code
谢谢!
最佳答案
你犯了两个错误:
- 在css中使用父子关系时,需要指向子
img
在本例中为父元素。
<li>
<a href="#">Anna</a>
<img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Anna">
</li>
CSS 选择应该是
.menu .listanomi > li:hover .menuimage { opacity: 1; }
.listanomi
不是 .menu
的直接子代.
注意:我还将 img float 更改为绝对到右上角。
这里的工作示例:
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #3e3436;
}
.menu {
width: 1000px;
margin: 0px auto;
}
.menuimage {
clear: none;
padding: 40px;
opacity: 0;
position: absolute;
top: 0;
right: 0;
transition: all linear 0.15s;
}
.menu .listanomi > li:hover .menuimage {
opacity: 1;
}
.listanomi {
float: left;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'Playfair Display', serif;
text-transform: uppercase;
text-decoration: none;
}
.menu a {
transition: all linear 0.15s;
color: #a1a1a1;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: #e8e8e8;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 16px;
text-decoration: none;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
text-decoration: none;
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
text-decoration: none;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu-collab,
.menu li:hover .sub-menu-mat,
.menu li:hover .sub-menu-arte {
z-index: 1;
opacity: 1;
}
.sub-menu-collab {
width: 150%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0%;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
text-decoration: none;
}
.sub-menu-mat {
width: 120%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0%;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
text-decoration: none;
}
.sub-menu-arte {
width: 150%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: -50%;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
text-decoration: none;
}
.sub-menu-collab li,
.sub-menu-mat li,
.sub-menu-arte li {
display: block;
font-size: 16px;
text-decoration: none;
}
.sub-menu-collab li a,
.sub-menu-mat li a,
.sub-menu-arte li a {
padding: 10px 30px;
display: block;
text-decoration: none;
}
.sub-menu-collab li a:hover,
.sub-menu-mat li a:hover,
.sub-menu-arte li a:hover {
background: #3e3436;
text-decoration: none;
}
.sub-menu-collab li a:visited,
.sub-menu-mat li a:visited,
.sub-menu-arte li a:visited {
text-decoration: none;
color: #989898;
}
.menu li a:visited {
text-decoration: none;
color: #999999;
}
.menu li a:active {
text-decoration: none;
color: #999999;
}
.current-item a {
background: #3e3436;
}
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li class="current-item"><a href="#">Home</a>
</li>
<li><a href="#">Collaboratori</a>
<div class="sub-menu-collab">
<div>
<ul class="listanomi">
<li><a href="#">Paolo</a><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Paolo">
</li>
<li><a href="#">Luca</a><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Luca">
</li>
<li><a href="#">Anna</a><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Anna">
</li>
<li><a href="#">Mara</a><img class="menuimage" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSR6KryU6yZY04TXZ7qgzBYtX61idklEgJGxnee_MausSGZJQqvmRXEbvo" title="Mara">
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">Materie di Competenza</a>
<ul class="sub-menu-mat">
<li><a href="#">penale</a>
</li>
<li><a href="#">civile</a>
</li>
<li><a href="#">punto c</a>
</li>
<li><a href="#">punto d</a>
</li>
</ul>
</li>
<li><a href="#">Arte</a>
<ul class="sub-menu-arte">
<li><a href="#">mostre</a>
</li>
<li><a href="#">eventi</a>
</li>
<li><a href="#">punto c</a>
</li>
<li><a href="#">punto d</a>
</li>
</ul>
</li>
<li><a href="#">Contatti</a>
</li>
</ul>
</nav>
</div>
</body>
关于javascript - 在下拉菜单中显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33724648/