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访问工具提示包装器：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

通用兄弟组合器当然也是可能的。有关详细信息，请参阅MDN。

悬停在图像

1 个答案: