我想对元素悬停产生一些影响。但我似乎无法使其发挥作用。下面是我当前项目中的html结构和css
<!-- HTML ELEMENT STRUCTURE -->
<div class="do-share">
<ul class="social-container">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
这是CSS
/* CSS file */
.do-share:hover > .social-container{
opacity: 1;
display: block;
position: absolute;
right: 0;
list-style: none;
margin: 0;
top: -85px;
}
.social-container {
display: none;
opacity: 0;
transition: all 2s linear;
}
但是对此的过渡效果不起作用。不知道我做错了什么
试试这个
.do-share:hover > .social-container{
opacity: 1;
display: block;
position: absolute;
left: 0;
list-style: none;
margin: 0;
top: 5px;
}
.social-container {
display: none;
opacity: 0;
transition: all 2s linear;
}
.do-share{
min-height: 100px;
}<div class="do-share">
<ul class="social-container">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>请尝试不透明度：
<html>
<body>
<div class="do-share">
<ul class="social-container">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</body>
</html>
和css代码：
body {
color: #fff;
}
.do-share:hover .social-container {
opacity: 0;
transition: all 5s linear;
}
.social-container {
opacity: 1;
list-style: none;
margin: 0;
top: 5px;
position: absolute;
left: 0;
}
.do-share {
min-height: 100px;
}