не может определить эффект правого наведения

Question

Я создал 3 кнопки на моей странице, на которых отображается img. Я хочу, чтобы изображение отображалось, когда люди переходили по кнопке с кодом HTML, CSS или JS & JQuery. Но проблема в том, что когда вы наводите курсор на изображение (которое вы еще не видите), вы также можете увидеть его.

Это мой сайт, где я использую его: My School Report.

Когда вы получите за Tie, коробка показывает вверх. Прокрутите вниз, и вы увидите кнопки.

Вот HTML код я использую для 1 из кнопок:

<div id="vlek4"> 
<div id="jsandjq"><img src="img/js&jq.png" width="576" height="104" /></div> 
</div> 

Вот код CSS я использую для 1 из кнопок:

#vlek4{ 
    background-image:url(../img/vlek4.png); 
    background-repeat:no-repeat; 
    position:absolute; 
    top:980px; 
    left:600px; 
    width:163px; 
    height:113px; 

    -webkit-transition-duration: 1.2s; 
    -moz-transition-duration: 1.2s; 
    -o-transition-duration: 1.2s; 
    transition-duration: 1.2s; 
} 

#vlek4:hover{ 
    position:absolute; 
    left:542px; 
    width:; 
    height:; 
} 

#vlek4 #jsandjq{ 
    position:absolute; 
    top:150px; 
    left:-460px; 
    width:163px; 
    height:113px; 
    opacity:0; 
} 

#vlek4:hover #jsandjq{ 
    position:absolute; 
    top:150px; 
    left:-460px; 
    width:163px; 
    height:113px; 

    opacity:1; 

    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
    -o-transition-duration: 0.8s; 
    transition-duration: 0.8s; 
} 

#vlek4:hover #jsandjq:hover img{ 
display:none; 
visibility:hidden;} 

Vlek4 выступает за JS & Кнопка JQuery. jsandjq означает изображение, которое отображается.

У кого-нибудь есть идея, что я делаю неправильно здесь? Проблема возникает в Chrome.

Спасибо!

Answer 1

Это потому, что вы пишете эффект зависания на весь div, который также содержит скрытое изображение.

Поместите изображение из области hover div.

<div id="vlek1"> 
      <div id="html"> <img src="img/html.png" width="576" height="104"> <!--Place this outside of the parent div--></div> 
</div> 

---

Метод 2

Вместо использования opacityvisibility. В этом случае вам не нужно менять HTML.

DEMO here (Прокрутка к нижней части панели вывода)

---

Изменение .vierkant div к .vierkant > div Поскольку он указывает на все дивы внутри .vierkant переходный эффект сталкивающихся так что это только для первый ДИВ из .vierkant

DEMO 2