工具提示在圖像上徘徊

Question

我有一個可靠的工具提示，效果很好，但我希望在我將鼠標懸停在圖像上時打開工具提示。眼下，刀尖是可見的，即使我懸停在下面的代碼中提到的包裝DIV：

.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。