我是新手,不要评判。
感谢之前的帮助,正如您在下面的代码中看到的那样,它的工作与更改后的图像保持一致。
现在我想添加一个指向的图标。指针图标,一旦悬停在有序列表项上。
因此,您突出显示的菜单项不仅会像现在一样改变颜色,还会包含一个图标。
我已经搜索过了。但是我很难过。如果你能快速回答,那就去做吧,但主要想知道它背后的逻辑。
我可以将它添加到“ul li:hover”吗?
http://jsfiddle.net/RichardTargett/njzLkp62/
.left-nav-box {
background-color: #fff;
border: 2px solid #0B88D2;
box-sizing: border-box;
float: left;
height: 1500px;
margin: 0px;
position: relative;
width: 225px;
}
.left-nav-box:hover {
background-color: #fff;
box-sizing: border-box;
float: left;
height: 1500px;
margin: 0px;
opacity: .95;
width: 225px;
}
#logo-image {
border: 2px solid #0B88D2;
margin-left: 10px;
margin-top: 10px;
}
.left-nav-box img.logo {
position: absolute;
left: 20px;
top: 20px;
transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.left-nav-box img.top:hover {
opacity: 0;
}
.left-nav-box ul {
padding: 0px 5px;
margin: 0px;
width: 168px;
position: relative;
top: 160px;
}
.left-nav-box ul li{
border: 1px solid #0B88D2;
box-sizing: border-box;
color: #2B5772;
font-family: 'segoe ui', 'lucida sans unicode', 'lucida grande', lucida, sans-serif;
list-style-type: none;
margin: 5px 5px;
padding: 10px 10px;
width: 198px;
}
.left-nav-box ul li:hover {
border: 1px solid #0B88D2;
box-sizing: border-box;
box-shadow: 0px 3px 0px #0B88D2;
color: #2B5772;
font-family: 'segoe ui', 'lucida sans unicode', 'lucida grande', lucida, sans-serif;
list-style-type: none;
margin: 5px 5px;
padding: 10px 10px;
width: 168px;
}
.left-nav-box ul li:nth-child(1):hover {
/*border-bottom: 5px solid red;*/
box-shadow: 0px 3px 0px red;
font-family: 'segoe ui', 'lucida sans unicode', 'lucida grande', lucida, sans-serif;
text-align: center;
color: #EE0060;
}
#tumblr01 {
border: 1px solid green;
text-align: center;
position: relative;
top: 160px;
}
<section id="background-wrapper">
<div class="left-nav-box">
<img src="http://unawakened.net/images/intro.jpg" class="bottom logo" width="180">
<img src="http://unawakened.net/images/intro.jpg" class="top logo" width="180">
<ul>
<li>Record</li>
<li>Home</li>
<li>Art & Media</li>
<li>Archive</li>
<li>Forums</li>
<li>Social</li>
<li>Sign Up</li>
<li>Contact Us</li>
</ul>
</div>
日
最佳答案
添加此样式:
.left-nav-box ul li { cursor: pointer; }
当您将鼠标悬停在元素上时,它将使鼠标成为指针。
这是一个 fiddle :http://jsfiddle.net/njzLkp62/1/
关于html - 添加图像,仅在悬停时,在 [already hover] 状态之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33533466/