Target multiple elements on hover css

Question

I have multiple elements I'm already targeting the hover class and that works it's showing the text and the icon, however, I need to change the opacity of the image as well so that shows when hovering over the text.

So I need both the text, icon and image to show all at the same time.

I've attempted this using CSS but if JS or jQuery is needed then a solution would be spot on.

Here is my code so far:

.features.desktop.highly-interactive.text {
    position: relative;
    text-align: left;
    width: 258 px;
  }

  .features.desktop.highly-interactive.text h2 {
    position: absolute;
    padding-top: 0;
    left: 0;
  }

  .features.desktop.highly-interactive.hover {
    padding-top: 30 px;
    position: absolute;
    text-align: left;
    display: block;
    opacity: 0;
  }

  .features.desktop.highly-interactive.hover: hover {
    opacity: 1;
  }

<section class="container">
  <section class="inner_content">
    <img src="./images/product-circle.svg" width="667">
    <img src="./images/product-features-default.png" alt="PlayOctobo plush" class="main-image">

    <a href="https://shop.trycelery.com/page/5bf8be5e33ce8313001185de" target="_blank" class="btn">Pre-Order Now</a>

    <div class="images">
      <img src="./images/HIImage.png" alt="Highly interactive" class="highly-interactive">
    </div>

    <section class="highly-interactive">
      <section class="text">
        <h2>Highly Interactive</h2>

        <section class="hover">
          <img src="./images/HIIcon.svg" class="icon">
          <span>8 separate sensor arrays invisibly integrated into Octobo’s arms and body, responsive LED lighting, and the touchscreen itself</span>
        </section>
      </section>
    </section>
  </section>
</section>

I'm sorry, but I don't understand. I get that you want the text, icon, and image to all display at once, but what do you want to be hovered over for these to display? What will be the hovered element? — Jack Bashford, Dec 30 '18 at 21:54
@JackBashford On hover yes, so once I hover over `highly-interactive` the text, icon and image in the `images` class should show. — , Dec 30 '18 at 21:55
Possible duplicate of [CSS :hover on other element?](https://stackoverflow.com/questions/11507481/css-hover-on-other-element) — Frederic Klein, Dec 30 '18 at 22:05

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

Solution

You can apply hover effects on parent, children and siblings

.parent .child {}
.child ~ .siblings {}

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 30 '18 at 21:57

Harry Punia

61
3

Might want to make a wrapper around the entire component and then use that wrapper to hover on and apply affect to any of its children. That usually works – Harry Punia Dec 30 '18 at 22:00

score 0 · Answer 2 · answered Dec 30 '18 at 22:10

you can use the jquery code to make the class of the images to show on hover.

$(".highly-interactive").mouseover(function(){
    $(".images").show();
  });

First do make this class to hide on DOM load.

window.load=function(){
$(".images").show();
}

and then load the script of mouseover to show only when it is hover.

Target multiple elements on hover css

2 Answers2

Solution