Learn the process of displaying and concealing elements when hovering over the parent element with Javascript

Question

Learn the process of displaying and concealing elements when hovering over the parent element with Javascript

I am facing a challenge with my containing div that has a 'h1' title and a 'p' description inside it. My goal is to have the 'description paragraph' hidden while the 'title' is visible when the page loads, and to have the title fade away while the description fades in when the mouse enters the container. I want them to swap visibility back to their original state when the mouse moves out of the container. Unfortunately, I was unable to achieve this using CSS alone.

My understanding of javascript is limited, but I can somewhat comprehend it when I see it. Any assistance on this matter would be highly appreciated. I am also willing to provide more information if required.

<div class="container">
    <h1 class="name">Title</h1>
    <p>description</p>
</div>

javascript jquery html css

Answer 1

Answer №1

To achieve a fade effect, you can utilize CSS transitions.

Start by setting the opacity of all paragraphs to zero. When hovering over a heading, increase the opacity of the paragraph and gradually decrease the opacity of the heading.

.container p {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}
.container h1 {
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}
.container:hover p {
  opacity: 1;
}
.container:hover h1 {
  opacity: 0;
}

<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>

You can also incorporate jQuery's hover and animate methods for this effect.

$('.container').hover(function() {
  $(this).find('p').animate({
    opacity: 1
  }).end().find('h1').animate({
    opacity: 0
  });
}, function() {
  $(this).find('p').animate({
    opacity: 0
  }).end().find('h1').animate({
    opacity: 1
  });
});

.container p {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>

Answer 2

To achieve a fade effect, you can utilize CSS transitions.

Start by setting the opacity of all paragraphs to zero. When hovering over a heading, increase the opacity of the paragraph and gradually decrease the opacity of the heading.

.container p {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}
.container h1 {
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}
.container:hover p {
  opacity: 1;
}
.container:hover h1 {
  opacity: 0;
}

<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>

You can also incorporate jQuery's hover and animate methods for this effect.

$('.container').hover(function() {
  $(this).find('p').animate({
    opacity: 1
  }).end().find('h1').animate({
    opacity: 0
  });
}, function() {
  $(this).find('p').animate({
    opacity: 0
  }).end().find('h1').animate({
    opacity: 1
  });
});

.container p {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>

Answer 3

Answer №2

To toggle the display of elements, utilize the .hide() and .show() functions for a smoother user experience. Start by setting the description to display: none in the CSS file. Additionally, implement the mouseout() and mouseover() functions to control the visibility of elements based on user interaction.

<div class="container">
    <h1 class="name">Title</h1>
    <p id="desc">description</p>
</div>

$('.container').mouseout(function(){
     $('.name').show();
     $('#desc').hide();
});

$('.container').mouseover(function(){
    $('.name').hide();
    $('#desc').show();
});

#desc{
    display:none;
}

Check out the demo on JSfiddle : http://jsfiddle.net/n470z649/

Answer 4

To toggle the display of elements, utilize the .hide() and .show() functions for a smoother user experience. Start by setting the description to display: none in the CSS file. Additionally, implement the mouseout() and mouseover() functions to control the visibility of elements based on user interaction.

<div class="container">
    <h1 class="name">Title</h1>
    <p id="desc">description</p>
</div>

$('.container').mouseout(function(){
     $('.name').show();
     $('#desc').hide();
});

$('.container').mouseover(function(){
    $('.name').hide();
    $('#desc').show();
});

#desc{
    display:none;
}

Check out the demo on JSfiddle : http://jsfiddle.net/n470z649/

Learn the process of displaying and concealing elements when hovering over the parent element with Javascript

Answer №1

Answer №2

Similar questions

Ways to obtain data in JavaScript function from HTML

Are you using yeoman with csslint in your project?

Trigger a pop-up alert box when the jQuery event $(document).ready is fired within a Smarty template

An issue has been encountered in the following module federation: `TypeError: g.useSyncExternalStore is not a function`

Performing a JSONP request using jQuery's .ajax method to a specific URL including an unidentified

I encountered an AJAX error while working on my project

Contrast between utilizing filter_input and accessing $_POST directly following an asynchronous AJAX request

Utilize Angular 8 to dynamically populate Input values with data pulled from an API

Instructions on inserting an IFRAME using JavaScript into dynamically loaded content via AJAX

Is it possible to incorporate vector graphics/icons by simply adding a class to a span element in HTML5?

The center alignment doesn't seem to function properly on mobile or tablet devices

Utilizing JQuery to Access the Return Value from an Ajax Request Beyond the Scope of the Call

Develop a custom class for importing pipes in Angular 4

The background color in CSS frames the text with a unique hue

Method for displaying or concealing list items with an onClick event in React without relying on JQUERY

Vanishing Submenus

Retrieve all HTML elements, including their closing tags, from a file with Java, without relying on external libraries such as Jsoup

Identifying Flash content in a unique way

Adjust the background hue of the Row in the Table

Establish a connection between the MySql database in WHM (phpmyadmin) and a node.js application