HTML CSS3 Jquery Hovermenü

Question

Ich versuche, ein Hover-Menü CSS3 zu erstellen. Ich möchte ein Bild schweben lassen (wie das erste Foto) und dann erscheint mein Menü (wie das zweite Foto) und ich möchte auch das erste Bild ausblenden. Schließlich möchte ich den Hover-Status beibehalten, wenn der Cursor im Menü ist.

Quellcode:

$("#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; 
} 

Answer 1

Sie brauchen keine js Code zu tun. Verwenden Sie :hover Pseudoklasse statt:

#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>

Answer 2

änderte ich etwas Teil des Codes. Sie können diesen Code verwenden

$("#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>