Using Javascript to add hovering effects that demonstrate sophistication and style

Question

Using Javascript to add hovering effects that demonstrate sophistication and style

I have a question :

Here is the HTML code snippet:

<div class="a b">
    <span class="one">Success ONE</span>
    <span class="two">ONE</span>
</div>

<div class="a b">
    <span class="one">Success TWO</span>
    <span class="two">TWO</span>    
</div>

I am trying to display the content of .two which is hidden by default. When using CSS, I can achieve it like this:

.two {visibility:hidden;}
.a:hover .two {visibility:visible;}

Although this CSS solution works fine, I am unable to use .a:hover .two {visibility:visible;} in my case. So, I am looking for a JavaScript alternative to show .two when hovering over the .a class. Can you assist me in achieving the same result with JavaScript as achieved with CSS using

.a:hover .two {visibility:visible;}

)?

javascript jquery html css

Answer 1

Answer №1

It seems unnecessary to use JavaScript for this task when CSS can achieve the same result easily:

CSS

.two {display:none;}

JavaScript

$(".a").hover(function(){
   $(this).find(".two").toggle();
});

Check out this FIDDLE for demonstration.

// EDIT

Originally, I provided a longer code snippet that achieved the same effect. Here it is:

$(".a").hover(function(){     
    $(this).find(".two").css({"visibility":"visible"}); 
}, function(){     
    $(this).find(".two").css({"visibility":"hidden"}); 
});

Answer 2

It seems unnecessary to use JavaScript for this task when CSS can achieve the same result easily:

CSS

.two {display:none;}

JavaScript

$(".a").hover(function(){
   $(this).find(".two").toggle();
});

Check out this FIDDLE for demonstration.

// EDIT

Originally, I provided a longer code snippet that achieved the same effect. Here it is:

$(".a").hover(function(){     
    $(this).find(".two").css({"visibility":"visible"}); 
}, function(){     
    $(this).find(".two").css({"visibility":"hidden"}); 
});

Answer 3

Answer №2

To begin, the first step is to specify in the CSS file.

.hide {visibility:hidden;}

Next, implement the following code snippet.

<script>
$(document).ready(function(){
  $(".item").hover(function(){
    $(this).find('.hide').css("visibility","visible");
  },function(){
    $(this).find('.hide').css("visibility","hidden");
  });
});
</script>

Answer 4

To begin, the first step is to specify in the CSS file.

.hide {visibility:hidden;}

Next, implement the following code snippet.

<script>
$(document).ready(function(){
  $(".item").hover(function(){
    $(this).find('.hide').css("visibility","visible");
  },function(){
    $(this).find('.hide').css("visibility","hidden");
  });
});
</script>

Answer 5

Answer №3

Issue resolved! I implemented a solution using JavaScript:

$(".a").on("mouseover", function(){
    $(this).find(".two").css({"visibility":"visible"});
}).on("mouseout", function(){
    $(this).find(".two").css({"visibility":"hidden"});
});

This code snippet was originally shared by @jmore009 before he made changes to his last response.

Answer 6

Issue resolved! I implemented a solution using JavaScript:

$(".a").on("mouseover", function(){
    $(this).find(".two").css({"visibility":"visible"});
}).on("mouseout", function(){
    $(this).find(".two").css({"visibility":"hidden"});
});

This code snippet was originally shared by @jmore009 before he made changes to his last response.

Using Javascript to add hovering effects that demonstrate sophistication and style

Answer №1

Answer №2

Answer №3

Similar questions

inefficient performance in linking function within the visual aspect

What is the best method for accessing a specific Data value on the route?

Scroll on sidebar that overflows, rather than the page behind

The scroll animation feature was not functioning properly in Next.js, however, it was working flawlessly in create react app

Steps for sending an image to Cloudinary using the fetch API

Placing jQuery in the lower part of my HTML templates lacks adaptability

Click on the button to sort Angular data

The CSS :first-child selector appears to be malfunctioning with the majority of elements

Is it possible to incorporate an ajax response into my form without the need for a separate javascript file?

Navigating and interacting with dynamically loaded content received through Ajax requests

The scrollbar located within a table cell is malfunctioning and unresponsive

Retrieving the IDs of all socket connections in a Node.js Socket.IO array

Enumerated type alias in Typescript

Can microdata be applied to an element that embodies a pair of data points?

Concerns about the Dependency Tree in React

Connect-busboy: The file being piped to the write stream is either empty or incorrect, depending on its type

Prevent any further dissemination if I continue typing repeatedly

Capturing jQuery ajax requests in Angular

Invoking a React function repeatedly (every second)

The XMLHttpRequest header is not being sent by jQuery.ajax