关于子元素设置hover失效的问题

自行脑补
  • 1k
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点轮播图_1</title>
    <link rel="stylesheet" href="css/style.css">
    <style type="text/css">
@font-face {
  font-family: 'iconfont';
  /* project id 282854 */
  src: url("https://at.alicdn.com/t/font_t8a5fr2b6z7fzuxr.eot");
  src: url("https://at.alicdn.com/t/font_t8a5fr2b6z7fzuxr.eot?#iefix") format("embedded-opentype"), url("https://at.alicdn.com/t/font_t8a5fr2b6z7fzuxr.woff") format("woff"), url("https://at.alicdn.com/t/font_t8a5fr2b6z7fzuxr.ttf") format("truetype"), url("https://at.alicdn.com/t/font_t8a5fr2b6z7fzuxr.svg#iconfont") format("svg"); }
.arrow {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale; }

* {
  margin: 0;
  padding: 0; }

#wapper {
  width: 658px;
  height: 370px;
  margin: 30px auto;
  /*    border: 1px solid red;*/
  overflow: hidden;
  position: relative; }
#wapper #pic_list {
    width: 4200px;
    height: 370px; }
#wapper #pic_list img {
      float: left; }
#wapper #button_list {
    width: 140px;
    height: 10px;
    position: absolute;
    bottom: 20px;
    left: 280px; }
#wapper #button_list span {
      cursor: pointer;
      float: left;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid #fff;
      background-color: #333;
      margin-right: 15px; }
#wapper #button_list .on {
      background: orangered; }
#wapper .arrow {
    cursor: pointer;
    display: none;
    line-height: 50px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 2;
    top: 180px;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff; }
#wapper #prev {
    left: 20px; }
#wapper #next {
    right: 20px; }

#wapper:hover .arrow {
  display: block; }

#wapper .arrow:hover {
  background-color: rgba(0, 0, 0, 0.7); }        
</style>
</head>
<body>
    <div id="wapper">
        <div id="pic_list">
            <img src="images/1.jpg" alt="1"/>
            <img src="images/1.jpg" alt="1">
            <img src="images/2.jpg" alt="2">
            <img src="images/3.jpg" alt="3">
            <img src="images/4.jpg" alt="4">
            <img src="images/5.jpg" alt="5">
            <img src="images/1.jpg" alt="5"/>
        </div>
        <div id="button_list">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <i id="prev" class="arrow">&#xe62c;</i>
        <i id="next" class="arrow">&#xe62b;</i>

    </div>
</body>
</html>

当我设置

#wapper:hover .arrow {
  display: block; }
.arrow:hover {
  background-color: rgba(0, 0, 0, 0.7); }

arrow是没有hover反应的,只有改成

#wapper .arrow:hover {
  background-color: rgba(0, 0, 0, 0.7); }

才可以,请问是为什么呢

回复
阅读 5.1k
1 个回答

这是个优先级问题

#wapper .arrow{
    background-color: rgba(0, 0, 0, 0.2);
}

本来就有个背景颜色
而.arrow:hover 优先级不够 #wapper .arrow 高
#wapper .arrow:hover 则可以

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏