문자 위로 호버 배경 이미지가 사라짐

Question

이전의 스택 오버 도움을 사용하여 요일을 표시하는 호버 메뉴를 만들었습니다. 하루 이상 마우스를 가져 가면 상단에 텍스트가있는 이미지가 나타납니다. 나는 그것을 만들기까지있다. 그러나 이제는 내 문제가 있습니다 : 텍스트 위로 마우스를 가져 가면 뒤에있는 호버 이미지가 사라집니다.

나는 그것이 z-index를 사용하여 고칠 수있는 문제일지도 모르겠지만 작동하지 않는다고 생각했습니다.

나는

<div id="nav"> <div style="display:inline-block;white-space: nowrap"> 
<ul class="menu"> 
    <li> 
     <div class="img1 left"> <a href="#" id="thursButton" class="thursButton" border="0"></a> 

      <p><u>Thursday, 19th</u> 
Text 
<br/>Text 
      </p> 
     </div> 
    </li> 
    <li> 

      </p> 
     </div> 
    </li> 

당신에게 Stackov 감사 내 CSS

#nav { 
display:inline; 
list-style:none; 
position:fixed; 
width:1290px; 
margin:0 auto; 
left:0px; 
right:0px; 
float:clear; 
top:130px; 
z-index:1000; 

} 

.menu li { 
display:inline; 
vertical-align:top; 
float:left; 

} 

.menu li a { 
display:block; 
height:407px; 
width:250px; 

} 

.img1 { 
width:250px; 
height:407px; 
position:relative; 
} 

.thursButton { 
width:250px; 
height:407px; 
display:block; 
} 

#thursButton { 
background-image:url('http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png'); 
} 

#thursButton:hover { 
background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png'); 
} 
.left p { 
color:#FFFFFF; 
display:none; 
font-size:20px; 
left:5px; 
position:absolute; 
text-shadow:1px 1px 1px #000000; 
text-transform:uppercase; 
top:100px; 
width:245px; 
white-space: pre-line; 
word-wrap: break-word; 


} 

.left:hover p { 
display:block; 

} 

html로 여기에 JSfiddle

됩니다했습니다 어쨌든!

Answer 1

호버 작동을 변경해야합니다.

나는 또한이 질문 중 적어도 7-10 개를 보았습니다 ... 우리는 당신이 짝을 지어 프로젝트를 수행하는 것을 돕기 위해 왔습니다.

이 일어나고있는 이유를 설명하기 위해,

당신은 당신이 변화를 만들기 위해 그 유혹 할 필요가 의미 호버 상태에 대한 #thursButton을 목표로하고 있습니다. 텍스트 위를 가리키면 더 이상 #thursButton 위로 마우스를 가져 가지 않습니다.

내가 한 일은 부모에게 마우스를 올려 놓는 상태를 추가하는 것이 었습니다. 그래서 부모님이 부모님을 어디로 유인 할 것인지 알려주세요.

이 변화하는 요구 것입니다,

#thursButton:hover { 
    background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png'); 
} 

에, 여기

.img1:hover #thursButton { 
    background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png'); 
} 

는 JSFIDDLE이다.

Answer 2

문제는 요소를 스태킹하는 데 있습니다. 당신은 a 위에 마우스를 올렸지 만, 당신이 텍스트를 가리킬 때, 당신은 더 이상 배경을 가지고있는 a를 떠지지 않습니다.

조쉬의 답변은 완벽하게 작동하지만 포인터 이벤트로도 해결할 수 있습니다.

변경 다음 CSS는 :

.left p { 
    color: #FFFFFF; 
    display: none; 
    font-size: 20px; 
    left: 5px; 
    position: absolute; 
    text-shadow: 1px 1px 1px #000000; 
    text-transform: uppercase; 
    top: 100px; 
    width: 245px; 
    white-space: pre-line; 
    word-wrap: break-word; 
    pointer-events: none; 
} 

이것은 p가 어떤 마우스 이벤트를하지하게됩니다. 이것은 여전히 ​​작동에 마우스를 가져옵니다.