이미지 위에 올려 놓을 때의 툴팁

Question

잘 작동하는 호버 툴팁이 있지만 이미지 위로 마우스를 가져 가면 툴팁이 열려야합니다. 현재, 툴 팁은 내가 다음 코드에서 언급 한 래퍼 사업부 위에 마우스를 올려 경우에도 볼 수 있습니다 :

.wrapper{ 
 
    position:relative; 
 
} 
 
.tooltip1 { 
 
    transform: none; 
 
    margin: 50px;  
 
} 
 

 
.tooltip1:hover > .tooltip1-text, .tooltip1:hover > .wrapper { 
 
    pointer-events: auto; 
 
    opacity: 1.0; 
 
} 
 

 
.tooltip1 > .tooltip1-text, .tooltip1 >.wrapper { 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 6000; 
 
    overflow: visible; 
 
    padding: 5px 8px; 
 
    margin-top: 10px; 
 
    line-height: 16px; 
 
    border-radius: 4px; 
 
    text-align: left; 
 
    color: #000; 
 
    background: #fff; 
 
    pointer-events: none; 
 
    opacity: 0.0; 
 
    -o-transition: all 0.3s ease-out; 
 
    -ms-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
    border-color:black; 
 
    border:solid; 
 
}

<div class="tooltip1 tooltip1-scroll"> 
 
       <img alt="" src="../Images/TooltipImage.png" /> 
 
     <div class="wrapper"> 
 
      <span class="tooltip1-text"> 
 
    Some text here.Some text here.Some text here.Some text here.Some text here.<br/> 
 
      Some text here.Some text here.Some text here.Some text here.Some text here.<br/> 
 
      Some text here.Some text here.Some text here.Some text here. <br/> 
 
      Some text here.Some text here.Some text here.Some text here.Some text here. <br/> 
 
      Some text here.Some text here.Some text here.Some text here.Some text here.Some text here.<br/> 
 
      Some text here.Some text here.Some text here.Some text here.Some text here. <br /> 
 

 
      </span> 
 

 
    </div> 
 
</div>

나는 스크롤 할 수 툴팁 구현을위한 아래에 언급 된 링크를 언급했다. https://stackoverflow.com/questions/29218795/scrollable-hoverable-css-tooltip-with-psuedo-elements

그러나 언급 한 유일한 문제는 도구 팁이 래퍼 div가 아닌 이미지 위에 놓인 경우에만 열리 길 원합니다.

Answer 1

.tooltip1 img:hover + .tooltip1-text으로 가능합니다. 당신은 이미지 요소와 함께 :hover을 설정 adjacent sibling combinator 툴팁 래퍼에 액세스 할 수 있습니다

.wrapper { 
 
    position: relative; 
 
} 
 
.tooltip1 { 
 
    transform: none; 
 
    margin: 50px; 
 
} 
 
.tooltip1 img:hover + .tooltip1-text, 
 
.tooltip1 img:hover + .wrapper { 
 
    pointer-events: auto; 
 
    opacity: 1.0; 
 
} 
 
.tooltip1 > .tooltip1-text, 
 
.tooltip1 >.wrapper { 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 6000; 
 
    overflow: visible; 
 
    padding: 5px 8px; 
 
    margin-top: 10px; 
 
    line-height: 16px; 
 
    border-radius: 4px; 
 
    text-align: left; 
 
    color: #000; 
 
    background: #fff; 
 
    pointer-events: none; 
 
    opacity: 0.0; 
 
    -o-transition: all 0.3s ease-out; 
 
    -ms-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
    border-color: black; 
 
    border: solid; 
 
}

<div class="tooltip1 tooltip1-scroll"> 
 
    <img alt="" src="http://placehold.it/100" /> 
 
    <div class="wrapper"> 
 
    <span class="tooltip1-text"> 
 
    Some text here.Some text here.Some text here.Some text here.Some text here.<br/> 
 
    Some text here.Some text here.Some text here.Some text here.Some text here.<br/> 
 
    Some text here.Some text here.Some text here.Some text here. 
 
    </span> 
 
    </div> 
 
</div>

일반 형제 콤비도 물론 가능합니다. 자세한 내용은 MDN을 참조하십시오.