CODEWITHSUNDEEP
javascriptjqueryhtmlcss
B Johnson
B Johnson

Reputation: 193

Displaying a sibling <div> on <a> hover

The HTML structure of the header is not ideal, but cannot be changed at this time.

Here is the HTML:

    <nav>
        <a href="">About</a>
        <a class="speakingdropbtn" href="">Speaking</a>
        <div class="speakingdropdown">
            <a href="" style="text-indent:25px;">Assemblies</a>
            <a href="" style="text-indent:25px;">Religious</a>
            <a href="" style="text-indent:25px;">Corporate</a>
        </div>
        <a href="">Products</a>
        <a href="">Media</a>
        <a href="">Contact</a>
        <a href="">Blog</a>
    </nav>

I'm trying to make it display the div with the class "speakingdropdown" when I hover over the anchor tag with the class "speakingdropbtn"

What CSS or JS or JQuery would I need to use to make that happen? I can post CSS, but there's a ton of it because the whole header is fully responsive.

Upvotes: 2

Views: 291

Answers (3)

MrGood
MrGood

Reputation: 545

Without any css styles, this is the most basic implementation. We hide the dropdown and then on hover we use jQueries .show() method.

$(".speakingdropbtn").hover(function(){
  $(".speakingdropdown").show()
})
.speakingdropdown {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
        <a href="">About</a>
        <a class="speakingdropbtn" href="">Speaking</a>
        <div class="speakingdropdown">
            <a href="" style="text-indent:25px;">Assemblies</a>
            <a href="" style="text-indent:25px;">Religious</a>
            <a href="" style="text-indent:25px;">Corporate</a>
        </div>
        <a href="">Products</a>
        <a href="">Media</a>
        <a href="">Contact</a>
        <a href="">Blog</a>
    </nav>

Upvotes: -1

guest271314
guest271314

Reputation: 1

You can use css adjacent sibling selector +, :hover pseudo class

div.speakingdropdown {
  display: none;
}

a.speakingdropbtn:hover + div.speakingdropdown {
  display: block;
}
<nav>
  <a href="">About</a>
  <a class="speakingdropbtn" href="">Speaking</a>
  <div class="speakingdropdown">
    <a href="" style="text-indent:25px;">Assemblies</a>
    <a href="" style="text-indent:25px;">Religious</a>
    <a href="" style="text-indent:25px;">Corporate</a>
  </div>
  <a href="">Products</a>
  <a href="">Media</a>
  <a href="">Contact</a>
  <a href="">Blog</a>
</nav>

Upvotes: 4

williamsandonz
williamsandonz

Reputation: 16430

$('.speakingdropbtn').hover(function() {
  $('.speakingdropdown').show();
},
function() {
  $('.speakingdropdown').hide();
});

Upvotes: 0

Related Questions