为什么hover后display:block不能显示

发布于
2017-03-26

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
*{
    margin: 0;
    padding-left: 0;
}
.sgood{
  position: relative;
  float: left;
  text-align: center;
  width:60px;
}
.s1{
  color:#666;
  font-size:12px;
  border:1px solid #3a3a3a;
  display:block;
  float:left;
  border-right:none;
  margin-top:35px;
  cursor:pointer;
  width: 60px;
  height: 35px;
  line-height: 34px;
  background: #fff;
}
.ss1{
    border: 1px solid #999;
    border-top:none;
  height:40px;
  width: 100%;
  background:#FFF;
  text-align:center;
  font-size:12px;
  position:absolute;
  top: 72px;
  display: none;
}
.s1:hover .ss1{
  display: block;

}
</style>
</head>
<body>

 <div class="sgood">
    <span class="s1">搜商品</span>
       <ul class="ss1">
           <li><a href="">店铺</a></li>
            <li><a href="">商品</a></li>
       </ul>
</div>

</body>
</html>

css html

阅读 11.4k

2 个回答

得票最新

IronnMan

132

发布于
2018-01-09

.ss1 {
    opacity: 0;
}
.ss1:hover {
    opacity: 1;
}

这样「显示 | 隐藏」也可以

vi幕

292

发布于
2017-03-26

因为你的ul不属于.s1的子元素
你可以改成.sgood:hover .ss1

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

为什么hover后display:block不能显示

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

图片沿着圆环的转动有什么方法吗？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

如何处理 CSS calc() 函数中的单位不一致问题？

js阻止冒泡问题？