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

Is it possible to upload multiple files using JavaScript?

Materriel-UI ToggleButton has the appearance of a traditional button

What is the reason for incorporating the footer within the container?

Using the express.Router instance for handling errors can be a useful tool in your development

Utilizing UIWebView for dynamic HTML templating

Laravel's routing system may cause complications when trying to send data via jQuery AJAX post requests

Top recommendation for utilizing $scope variables in Angular applications

Instructions for changing the background color continuously

The functionality of AngularJS routing is malfunctioning

Error: Syntax error detected. Unexpected blank space found. Expecting either "-" symbol, identifier, or variable

How can you ensure a form is properly validated using javascript before utilizing ajax to submit it

Issues arising during the initialization of Tinymce

Utilize JavaScript to seamlessly play a Spotify track within the Spotify client without disrupting your current

The fix for the unresponsive fixed container in Angular 2 Material

Guide to sending an HTML document containing images using the express framework

Examples, templates, and best practices for creating top-notch API documentation

When I click on my Material UI avatar image, it seems to override the button I had in

Dynamic data retrieval with the power of JavaScript and AJAX

Can the ThreeJS element be seen?

Tips on utilizing the useState hook for storing numerous key objects?