Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Marius Furnica
Marius Furnica
9,195 Points

Hover text and icons appear

Hi guys when i hover this text 

 <div class="product-1">
                        <img src="images/product-1.png" alt="Product1">
                        <div class="product product-sec-1">
                            <h3>Even &amp; Odd</h3>
                        </div>
</div>

I want to appear this sets of icons and to hide the text

<div class="slider-icons">
                    <li><a href=""><i class="fa fa-eye" aria-hidden="true"></i></a></li>
                    <li><a href=""><i class="fa fa-star-o fa-star-slide " aria-hidden="true"></i></a>
                    </li>
                    <li><a href=""><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
                    </li>
                    <li><a href=""><i class="fa fa-cart-arrow-down" aria-hidden="true"></i></a>
                       </li>
 </div>

My code is like that and is just hiding the text :

$('.product-sec-1 h3').hover(function(){
    $('.product-sec-1 h3').toggle()
});

Someone can help?

1 Answer

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

It's easy enough just to start the icons out hidden and toggle them at the same time:

BUT — if you hide the thing you are hovering, it's no longer "hovered" and will re-appear. This will start a hide/appear cycle that may appear as "flashing" on the screen. So what might work better is to have separate handlers for hover/unhover, and use the visibility property on the text instead of hiding it:

$(".slider-icons").hide();
$(".product-sec-1").hover(
  function() {
    $(".product-sec-1 h3").css("visibility", "hidden");
    $(".slider-icons").show();
  },
  function() {
    $(".product-sec-1 h3").css("visibility", "visible");
    $(".slider-icons").hide();
  }
);
Marius Furnica
Marius Furnica
9,195 Points

In the end i made it just with CSS

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

That's another good way. I just assumed you wanted a code solution based on what you provided.

You might consider posting your final solution here for the benefit of other students!