Why does this text not change to full opacity?

Question

I'm writing a story on this HTML document, and I have a Javascript that should turn whatever text the mouse hovers over to full opacity, but it seems to only be pushing it a fraction of full opacity depending on the starting opacity. The hovering class is set to an opacity of 1, so I don't understand why when the text changes to that class it doesn't become fully opaque.

$(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>

because the containing `
` always has a class of `hover` - i.e. opacity 0.2 — Jaromanda X, Apr 20 '17 at 00:10
May I suggest that you use `mouseenter` on `.hover` and `mouseleave` on `.hover` instead of `mouseover` on `.hover` and `mouseout` on `.hovering`, respectivly. Or use CSS's `:hover`. — ibrahim mahrir, Apr 20 '17 at 00:12
You don't need JavaScript for this. You should use the [:hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) pseudo-class. — StackSlave, Apr 20 '17 at 00:17
@JaromandaX `mouseover` keep firing every x amount of milliseconds. `mouseenter`, however, fires only once when the mouse enter the element space. — ibrahim mahrir, Apr 20 '17 at 00:22
@ibrahimmahrir - `With deep hierarchies, the amount of mouseenter events sent can be quite huge and cause significant performance problems. In such cases, it is better to listen for mouseover events` - are you sure? note: no browser I use fires mouseover unless the mouse has moved from not over to over - what POS browser are you using that fires mouseover every few milliseconds? — Jaromanda X, Apr 20 '17 at 00:24
@PHPglue - the effect is text is initially dim, then, on mouseover text becomes very visible, and then on mouseout text becomes **in**visible - not use you can achieve 3 states like that with CSS :p — Jaromanda X, Apr 20 '17 at 00:27
@JaromandaX _With deep hierarchies, the amount of mouseenter events sent can be quite huge..._ . [**It's quiet the opposite**](http://stackoverflow.com/questions/7286532/jquery-mouseenter-vs-mouseover). — ibrahim mahrir, Apr 20 '17 at 00:34
oh, sorry ... I was thinking of CSS mouseover, not jquery crap — Jaromanda X, Apr 20 '17 at 00:37
...and I confused `mouseover-mouseenter` with `keydown-keypress`. — ibrahim mahrir, Apr 20 '17 at 00:40

Matt Styles · Accepted Answer · 2017-04-20T00:49:07.893

It is because you have opacity set twice on the same element at two different levels:

Each  is set to opacity: .2;

Each  has transition: opacity 0.5s; opacity: 0;

A child element's opacity is relative to its parent's.

So if a  element has opacity 0.2, and it has a child  of opacity 1.0, then the opacity of the  is 1.0 * 0.2 = 0.2.

This is easily fixed by removing the hover class from the  elements, and then adding/removing the classes on the s only.

Here is a jsFiddle: https://jsfiddle.net/07fpueyb/

Alternatively, since you already are using jQuery, you can simplify this class situation a lot by using the fadeTo() function: https://api.jquery.com/fadeTo/

See jsFiddle at https://jsfiddle.net/cyr9575e/

Edit: you can do this even easier again by just using the :hover pseudoclass in CSS: https://jsfiddle.net/8z7581jb/1/

Why does this text not change to full opacity?

1 Answers1