Question

一旦我得到提示，我确定这是非常愚蠢的，但我不明白为什么悬停不起作用。我添加了jQuery只是为了检查它是否适用于点击。

＆＃13;

$(document).on("click", ".figure", function() {
  $(".popover").css("opacity", "1");
})

＆＃13;

.container {
  position: relative;
}

.popover {
  background-color: blue;
  position: absolute;
  top: 0;
  left: 200px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out 0s;
}

.figure:hover .popover {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='figure'>
    <img src='https://placehold.it/100' />
  </div>
  <div class='popover'>
    <p>
      Bla bla
    </p>
  </div>
</div>

＆＃13;

Answer 1

因为您的.popover div不是.figure div。

的孩子

此

使用了+选择器

＆＃13;

$(document).on("click", ".figure", function() {
  $(".popover").css("opacity", "1");
})

＆＃13;

.container {
  position: relative;
}

.popover {
  background-color: blue;
  position: absolute;
  top: 0;
  left: 200px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out 0s;
}

.figure:hover + .popover {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='figure'>
    <img src='https://placehold.it/100' />
  </div>
  <div class='popover'>
    <p>
      Bla bla
    </p>
  </div>
</div>

＆＃13;

Answer 2

更改

"config": {
    ...
    "ionic_rollup": "./config/rollup.config.js",
    "ionic_cleancss": "./config/cleancss.config.js",
    ...
  },

收件人：

.figure:hover .popover {
  opacity: 1;
}

Answer 3

尝试将类更改为id而不是将其悬停。

<强> JSFiddle link

#figure:hover + #popover {
   opacity:1;
}

当我将鼠标悬停在图像上时，为什么它不起作用？

3 个答案: