how can the class hide be removed when hovering over each link

Question

how can the class hide be removed when hovering over each link

How can I remove the class hide from a div with the class popover when hovering over each link? I have tried implementing the code below, but it doesn't seem to be working as expected.

$(document).ready(function() {
  $(".myPopover").each(function() {
    var doc = $(this);
    doc.mouseover(function() {
      doc.find('.popover').removeClass('hide').addClass('show');
    });
  });
});

.popover {
  width: 240px;
  padding: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  z-index: 1000000;
  position: relative;
  top: 10px;
  transition: 1s;
  background-color: #fff;
}

.popover.hide {
  opacity: 0;
}

.popover.show {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="myPopover">help</a>
<div class="popover hide">
    <h4>title</h4>
    <p>content</p>
</div>

<a href="#" class="myPopover">help2</a>
<div class="popover hide">
    <h4>title2</h4>
    <p>content2</p>
</div>

jquery html css

Answer 1

Answer №1

A non-JavaScript solution has been crafted, which proves to be beneficial in cases where JavaScript is disabled. It is advisable to resort to JavaScript only when HTML & CSS fall short in achieving the desired outcome; something as straightforward as this can easily be achieved with plain HTML & CSS.

body {
  background: white;
}

.popover {
  width: 240px;
  padding: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  z-index: 1000000;
  position: relative;
  top: 10px;
  transition: 1s;
  background-color: #fff;
}

.popover {
  opacity: 0;
}

.myPopover:hover ~ .popover {
  opacity: 1 !important;
}

<div>
  <a href="#" class="myPopover">help</a>
  <div class="popover hide">
    <h4>title</h4>
    <p>
      content
    </p>
  </div>
</div>

<div>
  <a href="#" class="myPopover">help2</a>
  <div class="popover">
    <h4>title2</h4>
    <p>
      content2
    </p>
  </div>
</div>

Answer 2

A non-JavaScript solution has been crafted, which proves to be beneficial in cases where JavaScript is disabled. It is advisable to resort to JavaScript only when HTML & CSS fall short in achieving the desired outcome; something as straightforward as this can easily be achieved with plain HTML & CSS.

body {
  background: white;
}

.popover {
  width: 240px;
  padding: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  z-index: 1000000;
  position: relative;
  top: 10px;
  transition: 1s;
  background-color: #fff;
}

.popover {
  opacity: 0;
}

.myPopover:hover ~ .popover {
  opacity: 1 !important;
}

<div>
  <a href="#" class="myPopover">help</a>
  <div class="popover hide">
    <h4>title</h4>
    <p>
      content
    </p>
  </div>
</div>

<div>
  <a href="#" class="myPopover">help2</a>
  <div class="popover">
    <h4>title2</h4>
    <p>
      content2
    </p>
  </div>
</div>

Answer 3

Answer №2

To optimize the code, consider binding an event handler to all elements with the "myPopover" class simultaneously instead of looping through each one:

$(document).ready(function() {

  $(".myPopover").hover(
    function() {
      $( this ).next('.popover').removeClass('hide').addClass('show');
    }, function() {
      $( this ).next('.popover').removeClass('show').addClass('hide');
    }
  );

});

Moreover, depending on the version of jquery being used, you can utilize the built-in functions $('.popover').hide() and $('.popover').show() provided by jquery

$(document).ready(function() {
    
    
      $(".myPopover").hover(
        function() {
  $(this).next('.popover').removeClass('hide').addClass('show');
        }, function() {
 $(this).next('.popover').removeClass('show').addClass('hide');
        }
      );
    
});

.popover {
  width: 240px;
  padding: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  z-index: 1000000;
  position: relative;
  top: 10px;
  transition: 1s;
  background-color: #fff;
}

.popover.hide {
  opacity: 0;
}

.popover.show {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a href="#" class="myPopover">help</a>
<div class="popover hide">
  <h4>title</h4>
  <p>
    content
  </p>
</div>
<a href="#" class="myPopover">help2</a>
<div class="popover hide">
  <h4>title2</h4>
  <p>
    content2
  </p>
</div>

Answer 4

To optimize the code, consider binding an event handler to all elements with the "myPopover" class simultaneously instead of looping through each one:

$(document).ready(function() {

  $(".myPopover").hover(
    function() {
      $( this ).next('.popover').removeClass('hide').addClass('show');
    }, function() {
      $( this ).next('.popover').removeClass('show').addClass('hide');
    }
  );

});

Moreover, depending on the version of jquery being used, you can utilize the built-in functions $('.popover').hide() and $('.popover').show() provided by jquery

$(document).ready(function() {
    
    
      $(".myPopover").hover(
        function() {
  $(this).next('.popover').removeClass('hide').addClass('show');
        }, function() {
 $(this).next('.popover').removeClass('show').addClass('hide');
        }
      );
    
});

.popover {
  width: 240px;
  padding: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .2);
  z-index: 1000000;
  position: relative;
  top: 10px;
  transition: 1s;
  background-color: #fff;
}

.popover.hide {
  opacity: 0;
}

.popover.show {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a href="#" class="myPopover">help</a>
<div class="popover hide">
  <h4>title</h4>
  <p>
    content
  </p>
</div>
<a href="#" class="myPopover">help2</a>
<div class="popover hide">
  <h4>title2</h4>
  <p>
    content2
  </p>
</div>

Answer 5

Answer №3

Try out this snippet:

doc.next('.popover').removeClass('hide').addClass('show');

When using the find method, it locates the element within it, but in this case, you have .popover positioned next to the anchor tag.

In any case, by using mouseover to remove the "hide" class and add the "show" class, your popup will only open and not close. You may want to handle this by incorporating a hover function to display and hide your popup, or include a close button to allow users to close it.

I hope this explanation proves helpful. Thank you!

Answer 6

Try out this snippet:

doc.next('.popover').removeClass('hide').addClass('show');

When using the find method, it locates the element within it, but in this case, you have .popover positioned next to the anchor tag.

In any case, by using mouseover to remove the "hide" class and add the "show" class, your popup will only open and not close. You may want to handle this by incorporating a hover function to display and hide your popup, or include a close button to allow users to close it.

I hope this explanation proves helpful. Thank you!

Answer 7

Answer №4

To remove the "hide" class from a div that comes after a link when the link is hovered over, follow these steps:

$(".myPopover").hover(function(){ // Triggered when hovering over a link with the class myPopover
    var div = $(this).next(".popover"); // Selects the next sibling element if it has the class popover
    $(div).removeClass("hide").addClass("show"); // Removes hide class and adds show class to the selected div
});

Answer 8

To remove the "hide" class from a div that comes after a link when the link is hovered over, follow these steps:

$(".myPopover").hover(function(){ // Triggered when hovering over a link with the class myPopover
    var div = $(this).next(".popover"); // Selects the next sibling element if it has the class popover
    $(div).removeClass("hide").addClass("show"); // Removes hide class and adds show class to the selected div
});

Answer 9

Answer №5

Try a unique method by utilizing the function on :

$( window ).on('mousemove', '.customTooltip', function(e){
     $( this ).next('.tooltip').removeClass ('hidden');
});

Assigning ids to your elements can also simplify the process of locating them regardless of their position.

Answer 10

Try a unique method by utilizing the function on :

$( window ).on('mousemove', '.customTooltip', function(e){
     $( this ).next('.tooltip').removeClass ('hidden');
});

Assigning ids to your elements can also simplify the process of locating them regardless of their position.

how can the class hide be removed when hovering over each link

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Tips for displaying AJAX response on a new webpage

Guide on inserting an item into a vertical navigation menu

Invoke the session on a different page and incorporate it into your JavaScript code

Creating JavaScript validation conditions based on certain criteria

Instead of modifying the selected class, jQuery generates inline styles

Incorporate dynamic rules into a CSS stylesheet

Prevent the Rain from descending

Accessing the .data() function is successful when referring to the element using $(this), but it does not work when using $($'#id_of_element'

Sending Django log files via AjaxORTransmitting Django log

When the page loads, the HTML side menu will automatically scroll to the active item in a vertical

jquery to create a fading effect for individual list items

Looking for a jQuery tool that transforms a standard table into a sortable masterpiece?

Unable to maintain constant slide down feature for jQuery dropdown

``Is there a reason why JavaScript/jQuery events are not functioning properly within a PHP foreach

Permanent Solution for HTML Textbox Value Modification

Unusual Actions from the Text Field

Separating jQuery functionalities

Creating three boxes within a single div using standard HTML and CSS

Repurposing JavaScript objects after clearing their contents

Storing css data for iPhone Facebook application