HTML CSS3 Jquery hover menu

Question

I'm trying to build a CSS3 hover menu. I want to hover an image (like first photo) and then appear my menu (like second photo) and also I want to hide the first image. Finally, I want to keep the hover state if cursor is on the menu.

Source code:

$("#div-right img").hover(function(){
    $('#div-right a').removeClass('hidden');
    $("#div-right img").css({opacity: "0"});
},function(){
    $('#div-right a').addClass('hidden');
    $("#div-right img").css({opacity: "1"});    
});

<div id="div-right"> 
    <a class="hidden" href="index.html" class="m1">HOME</a> 
    <a class="hidden" href="#" class="m2">ABOUT</a> 
    <a class="hidden" href="#" class="m3">CONTACT</a>
    <img src="images/menu-01.png" style="position:relative; right:30px;"> 
</div>

#div-right a hidden{
    display:none;
}

It would be better if you provide some info. what is going wrong for instance? And what did you try to solve this? — Merijndk
– Merijndk, Commented Jun 3, 2016 at 14:38
Because I cannot do it with only CSS. It doesn't work properly.. — was
– was, Commented Jun 3, 2016 at 15:58

Volodymyr Myshko · Accepted Answer · 2016-06-03 17:09:48Z

1

You don't need any js code to do that. Use :hover pseudoclass instead:

#div-right{
  display: inline-block;
  /*border added for debug purpose*/
  border: 1px solid rgba(0,0,0,0.1);
  width: auto;
}

#div-right:hover>a{
  font-size: 30px;
  color: black;
  font-weight: bold;
  padding: 5px;
  text-decoration: none;
}

#div-right:hover>img{
  display: none;
}

#div-right:hover>a{
  display: inline-block;
}

#div-right:hover>a:hover{
  text-decoration: underline;
}

#div-right>a{
  display:none;
}

<div id="div-right"> 
  <a class="hidden" href="index.html" class="m1">HOME</a> 
  <a class="hidden" href="#" class="m2">ABOUT</a> 
  <a class="hidden" href="#" class="m3">CONTACT</a>
  <img src="http://i.imgur.com/fitdd0s.png"> 
</div>

answered Jun 3, 2016 at 17:09

Volodymyr Myshko

3515 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammad · Accepted Answer · 2016-06-03 17:09:01Z

0

I changed bit part of your code. You can use this code

$("#div-right img, #div-right div").hover(function(){
    $("#div-right").addClass("hover");
},function(){
    $("#div-right").removeClass("hover");   
});

#div-right div {
    display: none;
}

.hover > img {
    opacity: 0.5;
}

.hover > div {
    display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-right"> 
    <img src="a"> 
    <div>
        <a href="#">HOME</a> 
        <a href="#">ABOUT</a> 
        <a href="#">CONTACT</a>
    </div>
</div>

answered Jun 3, 2016 at 17:09

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

Collectives™ on Stack Overflow

HTML CSS3 Jquery hover menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related