부모 div에 마우스를 올렸을 때만 div 안에 이미지를 표시하는 방법은 무엇입니까?

<div class="spotlight-item width-2 height-2"> 
    <a href="#" class="spotlight-info"> 
     <h2 class="large"> 
     Random text 
     </h2> 
    </a> 

    <img src="../images/background.jpg"> //actual image 

    <a href="#" onClick="alert(111)">  
     <img class="play-button" src="<%THEME%>images/play.png" style="width: 100px; height: 100px; margin-top: 30%; margin-left: 40%; display: none;"> 
    </a> 
</div>

재생 버튼 클래스가있는 이미지는 display : none으로 설정됩니다. 기본적으로. 그러나 사용자가 "spotlight-item"div를 가리키면 재생 버튼 이미지가 display : show로 설정되어야합니다.부모 div에 마우스를 올렸을 때만 div 안에 이미지를 표시하는 방법은 무엇입니까?

어떻게하면됩니까?

출처

2013-02-08 Lyver Kinkki

$ ("스포트라이트 항목.") 마우스를 (함수() {당신의 CSS}) – Dineshkani

그래.. 나는 순수한 CSS로 그것을 해결하고 싶다. –

.spotlight-item:hover .play-button { display: x; }

X = 인라인 블록 또는 인라인 블록

출처

2013-02-08 11:09:32 Toping

.spotlight-item  > img { visibility: hidden } 
.spotlight-item:hover > img { visibility: visible }

표시되지 않은 경우에도 요소의 속성 visibility 공간을 예약. 이렇게하면 렌더링 된 요소가 점프하는 것을 방지 할 수 있습니다.

경고 : 포인터가없는 장치의 경우에만 :hover을 사용하면 액세스 할 수 없습니다.

출처

2013-02-08 11:11:21 amon

예. 이런 이유로 가시성으로 전환했습니다. 포인터없는 장치에 대해 사용해야 할 것은 무엇입니까? –

그게 달려 있습니다. ': focus'는': hover'와 유사하며, 요소가 어떤 형태의 키보드 포커스를 가질 때 트리거됩니다. 터치 스크린의 경우 합리적인 상호 작용을 생각해야합니다. 나는 거기에 조언이 없다. – amon

CSS 규칙을 일부 추가하십시오. 예 :

.someClass:hover img { 
    display:block; 
}

이 .someClass 요소 안에 모든 <img> 년대를 표시합니다.

출처

2013-02-08 11:12:00 TheBronx

직접 해결.

/* play button */ 
.spotlight-area .spotlight .spotlight-item img.play-button { 
width: 100px; height: 100px; margin-top: 30%; margin-left: 40%; 
visibility: hidden; 

} 

/* play button hover */ 
.spotlight-area .spotlight .spotlight-item:hover img.play-button { 
width: 100px; height: 100px; margin-top: 30%; margin-left: 40%; 
visibility: visible; 
}

출처

2013-02-08 11:12:30

이 시도 : -

.spotlight-item:hover .play-button 
{ 
    display:block; 
}

출처

2013-02-08 11:12:32

<style type="text/css"> 
    .play-button { 
     width: 100px; 
     height: 100px; 
     margin-top: 30%; 
     margin-left: 40%; 
     display: none; 
    } 
    .spotlight-item:hover .play-button { 
     display: block; 
    } 
</style> 
<div class="spotlight-item width-2 height-2"> 
    <a href="#" class="spotlight-info"> 
     <h2 class="large"> 
     Random text 
     </h2> 
    </a> 

    <img src="../images/background.jpg"> //actual image 

    <a href="#" onClick="alert(111)">  
     <img class="play-button" src="<%THEME%>images/play.png"> 
    </a> 
</div>

출처

2013-02-08 11:16:19 mihaimm

부모 div에 마우스를 올렸을 때만 div 안에 이미지를 표시하는 방법은 무엇입니까?

답변

관련 문제