How do I hide one element until you hover over another?

Community Off Topic
#1

Hey, everyone! I’m creating a website for my HTML & CSS class from scratch and I have an ingredients list section and I want to make it to where when you hover over the icon I set next to each ingredient, that it activates a picture of that ingredient to the right. I’ve tried many methods, and I’m not having much luck. Here’s my code:

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8" />
  <title>Cornucopia Online</title>
  <link href="index_reset.css" rel="stylesheet" />
  <link href="index_styles.css" rel="stylesheet" />
  <link href="recipes_styles.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

</head>

<body>
  <nav id="TopNavBar">
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">My Account</a></li>
  </nav>
  <img src="cornlogo.png" alt="Cornucopia Online">
  <header>
    <nav id="NavBar">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="recipes.html">Recipes</a></li>
        <li><a href="#">Newsletter</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Support</a></li>
      </ul>
    </nav>
  </header>
  <section>
  <h1>Grilled Turkey</h1>

  <p>Take your turkey outside this year and let your grill do the cooking.
    Grilled turkey is deliciously crisp with a tangy smoked flavor. Properly
    treated, turkey on the grill doesn't take any longer than turkey cooked
    in an oven.</p>
  </section>
  <aside>
  <h2>Ingredients</h2>
  <ul>
    <li><img src="Turkey.png" alt="Turkey icon" width="25px"
      height="25px">1 turkey, 12 to 14 lbs.</li>

    <li><img src="GarlicClove.png" alt="Garlic clove icon" width="25px"
      height="25px">8-10 garlic cloves</li>

    <li><img src="Parsley.png" alt="Parsley icon" width="25px"
      height="25px">2 cups lightly packed Italian parsley leaves</li>

    <li><img src="Salt.png" alt="salt icon" width="25px"
      height="25px">1 Tbsp. kosher salt</li>

    <li><img src="BlackPepper.png" alt="Black pepper icon" width="25px"
      height="25px">2 tsp. freshly ground black pepper</li>

    <li><img src="ChiliPowder.png" alt="Chili icon" width="25px"
      height="25px">2 tsp. chili powder</li>

    <li><img src="Orange.png" alt="Orange icon" width="25px"
      height="25px">2 oranges</li>

    <li><img src="Butter.png" alt="Butter icon" width="25px"
      height="25px">1 stick unsalted butter</li>

    <li><img src="Broth.png" alt="Broth icon" width="25px"
      height="25px">2-4 cups reduced-sodium chicken stock</li>

    <li><img src="Onion.png" alt="Onion icon" width="25px"
      height="25px">1 large onion</li>

    <li><img src="Carrot.png" alt="Carrot icon" width="25px"
      height="25px">1 large carrot</li>
  <ul>
  </aside>
</body>

<footer>
  Cornucopia Online | 781 Bridge Street Bristol, CT 06010 | <a href="tel:8005551088">(800) 555 - 1088</a> |
  <a href="cornucopiaonline@example.org">cornucopiaonline@example.org</a>
</footer>

</html>

It’s the h2 elements. I want to be able to learn this so any suggestions would help a lot! Thanks.

57%20PM

#2

Great! You have no script for us to decipher. Using CSS it would be an :after pseudo-element selector that injects the content on a :hover pseudo class.

There is a CSS way, after all. But using script is also a solution if you want to add that complexity. Normally it would be a given, but CSS purists would prefer you try that approach first, and only enhance it with script, if it need further enhancements that are not possible with pure CSS.

Script is meant to manipulate the DOM when no other tools are available. There is always going to be an optimization argument over which is faster, script manipulation or CSS. Remember, a lot of code is running in the background when an event happens, whether our program sees it or not. It takes a lot of resources to redraw the screen when we hover on something that has an active listener.

But, that’s the path we take when there are operations associated with that event that CSS cannot handle, such as querying and returning data, AJAX calls, and so on. A typical search bar is equipped with a listener that is AJAX enabled. Start typing a search phrase and suggestions are popping up as you type. That’s something that CSS cannot do. If it’s display related, always reach for CSS, first. If it’s data related, then script is the only option.

The script solution is the better one, given the size of the content. `:after’ is a rather primitive pseudo-element and complex content will only lead to trouble.

A script solution would still involve CSS, though. We would want to hook a selector and alter its properties. That’s what DOM manipulation is about. Page elements, CSS selector rules, even other script is all in this domain.

Give the element a CSS rule that hides it and then let the script unhide it.

It means attaching a listener to the page element that detects the hover event. That will trigger a handler function which will execute on the data given in a targeted field or by a state.

1 Like