이미지 상단에있는 버튼 위로 마우스를 가져 가면 이미지에 호버 효과를 적용하는 방법은 무엇입니까?

Question

이미지에 호버 효과를 적용하고 해당 이미지 위에 배치 된 버튼 위로 마우스를 가져 가면 호버 효과를 유지하려고합니다. 나는 이러한 유형의 부모/자녀 문제에 관한 질문이 이전에 요청되었지만 이러한 대답은 내가이 문제를 스스로 해결할 수있을만큼 충분히 광범위하지 않았 음을 알고 있습니다. CSS는 유일한 해결책은 좋을 것이다. 그러나 나는 그것을 해결하기 위해 일부 JS가 필요하다고 생각한다. 여기

는 JSfiddle입니다 : http://jsfiddle.net/stijn777/k8dbfs3r/3/

내가 사진 클래스 내부의 버튼 위에 마우스 경우에도 적용 할 이미지 클래스에 호버 효과를 원하는 아래는 HTML에서 볼 수 있듯이.

<div class="picture"> 
<a class="image" href="./profile-picture.html"> 
<img alt="" src="http://www.liverpoolblogg.no/wp-content/uploads/2013/09/Daniel-Sturridge1.jpg"> 
</a> 
<input class="image btn btn-6 btn-6d" a href="www.test.com" type="button" value=" ADD " /> 
<div class="player"> 
<a href="./profile.html">Name</a> 
</div> 
</div> 

이미지 위에 다음 CSS를 사용하고 이미지 위에 버튼을 사용했습니다. 누군가가 나를 도울 수

.image:after { 
content:'\A'; 
position:absolute; 
width:55%; height: 70%; 
top:0; left:0; 
background:rgba(0,0,0,0.25); 
opacity:0; 
border-radius: 6px 6px 0px 0px; 
} 

.image { 
width: 100%; 
} 

.image:hover:after { 
opacity:1; 
} 

.picture:hover input { 
display: block; 
} 

.picture .player { 
position:absolute; 
margin-top: -40px; 
background-color: white; 
opacity: 0.7; 
width: 55%; 
height: 40px; 
padding-top: 8px; 
text-align: center; 
} 

.player a { 
color: #000000; 
font-family: sans-serif; 
font-size: 14px; 
text-decoration: none; 
} 


.picture input { 
position:absolute; 
top: 0; 
left: 0; 
margin-top: 10px; 
width: 55%; 
} 

희망,

스테인

Answer 1

변화 .picture:hover .image:after에 .image:hover:after 규칙입니다. : 호버는 마우스가 끝난 상태와 부모 요소에 적용되지만 버튼과 이미지는 형제입니다. 호버을 변경하는 것은 상호 부모 DIV (.picture)에서 감지 될 올바르게

 
.picture:hover .image:after { 
opacity:1; 
} 

http://jsfiddle.net/5n7gj8uc/

Answer 2

당신은과 같이, 부모 DIV를 사용하여 호버 효과를 활성화시킬 수 감지 호버이되도록한다 :

.picture:hover > .image:after { 
    opacity:1; 
} 

http://jsfiddle.net/k8dbfs3r/5/