Question

我正在写一篇关于这个HTML文档的故事，我有一个Javascript，它应该将鼠标悬停的任何文本转换为完全不透明度，但它似乎只是根据起始不透明度推动它的一小部分完全不透明度。 hovering类设置为不透明度为1，因此我不明白为什么当文本更改为该类时它不会变得完全不透明。

$(document).ready(function() {

  var exceptions = ["lorem", "ipsum", "consectetur", "pharetra"];

  $("p").each(function() {           //for all paragraphs
      var txt = $(this).text()       //get text, split it up, add spans where necessary, put it back together
          .split(" ")
          .map(function(x) {
          return exceptions.includes(x.toLowerCase()) ? x : "<span class='hover'>" + x + "</span>"}).join(" ");
      $(this).html(txt);             //set the text to our newly manipulated text
  }).on("mouseover", ".hover", function() {
      $(this).addClass("hovering");  //set opacity to 100%
  }).on("mouseout", ".hovering", function() {
      $(this).attr("class", "");     //set opacity to 0%, remove "hover" events
  });
});

.hover {
    opacity: .2;
}

.hovering {
    opacity: 1;
}

span {
    transition: opacity 0.5s;
    opacity: 0;
}

p {
    cursor: default;
}

<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "NarrativeTheory.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type = "text/javascript" src="NarrativeTheory.js"></script>
<h1>
Narrative Theory Project
</h1>
</head>

<body>
hover around in the area below...
<br>
<br>

<p class = "hover">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra risus nec maximus rutrum. Vestibulum vulputate, elit ac euismod gravida, felis erat eleifend felis, vel blandit lorem ex sit amet est. Cras luctus bibendum dolor, vel consequat magna.
    Morbi pellentesque turpis metus. Pellentesque sit amet erat ex. Integer et nisi nisl. Quisque ornare mollis velit, id elementum elit pharetra at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur
    cursus cursus dolor, eu laoreet mauris dapibus vitae. Nunc ac ipsum sit amet diam suscipit lobortis. Nam nec vehicula augue. Cras nec sapien vitae leo gravida vestibulum.
</p>
<p class = "hover">
    Etiam viverra bibendum aliquet. Aenean erat ligula, commodo id aliquet vel, eleifend ac orci. Aliquam blandit libero feugiat augue tincidunt, id fringilla lectus aliquam. Nulla ut nisl sit amet nulla feugiat porta. Curabitur euismod, mi vitae luctus facilisis,
    est risus ornare erat, sed efficitur justo lorem nec urna. Cras in fringilla dolor. Aliquam faucibus scelerisque nunc, et rutrum quam pharetra ac. Vestibulum velit enim, consequat id nisi in, laoreet feugiat turpis. Phasellus auctor pharetra ultrices.
    In ut condimentum lectus. Integer at dui egestas, ultrices metus pulvinar, venenatis mi. Donec vitae mauris viverra, convallis urna sit amet, posuere sapien. Sed quis magna odio. Vivamus mauris ipsum, euismod non sagittis eu, pretium et neque. Nunc
    consequat ipsum eget magna facilisis mattis. Nulla eu lorem id tortor faucibus placerat.
</p>

</body>
</html>

Answer 1

这是因为您在两个不同级别的同一元素上设置了两次不透明度：

每个都设置为opacity: .2;

每个都有transition: opacity 0.5s; opacity: 0;

子元素的不透明度相对于其父元素。

因此，如果元素的不透明度为0.2，并且它具有不透明度为1.0的子，那么的不透明度为1.0 * 0.2 = 0.2。

通过从hover元素中删除类，然后仅在上添加/删除类，可以轻松解决此问题。

这是一个jsFiddle：https://jsfiddle.net/07fpueyb/

或者，由于您已经在使用jQuery，因此可以使用fadeTo（）函数大量简化此类情况：https://api.jquery.com/fadeTo/

请参阅https://jsfiddle.net/cyr9575e/

上的jsFiddle

编辑：只需在CSS中使用：hover pseudoclass，您就可以更轻松地完成此任务：https://jsfiddle.net/8z7581jb/1/

为什么此文字不会变为完全不透明？

1 个答案: