Допомога у програмуванні, відповіді на питання / Джейкері / HTML CSS3 JQuery hover меню - jquery, css3, меню

HTML CSS3 Меню навігації Jquery - jquery, css3, меню

Я намагаюся створити меню навігації CSS3. Я хочу навести зображення (наприклад, першу фотографію), а потім відобразити моє меню (як другу фотографію), а також хочу приховати перше зображення. Нарешті, я хочу зберегти стан наведення курсора, якщо курсор знаходиться в меню.

Вихідний код:

$("#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/images/menu-01.png" style="position:relative; right:30px;">
</div>

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

Відповіді:

1 для відповіді № 1

Вам не потрібно жодного js-коду для цього :hover замість цього псевдоклас:

#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="/images/http://i.imgur.com/fitdd0s.png">
</div>

0 для відповіді № 2

Я змінив бітову частину вашого коду. Ви можете використовувати цей код

$("#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="/images/https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-right">
<img src="/images/a">
<div>
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">CONTACT</a>
</div>
</div>