老师为什么我的hover效果没出来
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>background-size</title>
<style type="text/css">
a{text-decoration:none;}
ul{list-style:none;}
div{
background-image:url("http://img1.sycdn.imooc.com/climg//582c37e50001b08102000065.jpg");
width:100px;height:100px;
display:none;border:2px solid red;
background-repeat:no-repeat;
}
/*补充代码*/
.length h3 a:hover .length div{background-size: 100px 100px;display: block;}
.percent>h3:hover .percent div{background-size: 50% 50%;display: block;}
.cover>h3:hover .cover div{background-size: cover;display: block;}
.contain>h3:hover .contain div{background-size: contain;display: block;}
</style>
</head>
<body>
<h2>background-size不同属性值不同效果</h2>
<ul>
<li class="length">
<h3><a href="">100px 100px</a></h3>
<div></div>
</li>
<li class="percent">
<h3><a href="">50% 50%</a></h3>
<div></div>
</li>
<li class="cover">
<h3><a href="">cover</a></h3>
<div></div>
</li>
<li class="contain">
<h3><a href="">contain</a></h3>
<div></div>
</li>
</ul>
</body>
</html>
正在回答
同学你好，:hover后面直接写需要操作的元素就好，不需要从头再开始获取元素。如下修改：
移入h3的手时候，兄弟元素div显示出来。后面的效果自己可以修改下。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星