CSS：将鼠标悬停在链接上但不显示图像答案

【问题标题】：CSS: Hover over a link but image is not displayedCSS：将鼠标悬停在链接上但不显示图像
【发布时间】：2017-10-01 15:31:45
【问题描述】：

实际上，当我将这些链接悬停时，它们都会变成绿色，因为第一个悬停选择器执行得很好。但是，对于最后一个链接“cde”，我调用另一个悬停选择器来显示图像，它不起作用。

我尝试过的：

设置 original opacity = 0 -- hover opacity = 1 --> 不起作用
设置 original display = none -- hover display = block --> 不起作用

问题：有什么方法可以让图片显示为文本变为绿色？

非常感谢您的帮助。非常感谢！

 
.work-abcde a:hover{
  color: #61c261;
  }

  .cde-pic{
  position: relative;
  width: -100px;
  top: -100px;
  float: right;
  visibility: hidden;
  }

.cde:hover .cde-pic {
  position: relative;
  left: -20px;
  visibility: visible;
}

<div class="work-abcde">
<ul>
<li><h3>abc bcd cde</h3></li>
<li><h4><a class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4></li>
<li><h4><a class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4></li>
<li><h4><a class="cde" href="www.cde.com" rel="nofollow"> cde</a> </h4> </li>
<div class="cde-pic"><img src="./Resources/cde.png" ></div>
</ul>
</div>

【问题讨论】：

HTML 有错误：div 不在
内。此外，您永远不会更改悬停时的宽度；也许这就是问题所在。图片有多大？

【解决方案1】：

问题是 css 选择器不能在纯 CSS 中定位父级，您可以定位兄弟或子级但不能定位父级（纯 CSS）。

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

CSS3 中有四种不同的组合子：

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

有关子/兄弟选择器的更多信息，您可以在此处阅读更多内容（阅读 2 分钟）https://www.w3schools.com/css/css_combinators.asp

解决方案一：

<li> 和 <div> 是兄弟姐妹。所以使用lihover 而不是cde 类，那么你可以定位cde-pic 类：

li:hover ~ .cde-pic {
  position: relative;
  left: -20px;
  visibility: visible;
}

.work-abcde a:hover {
  color: #61c261;
}

.cde-pic {
  position: relative;
  width: -100px;
  top: -100px;
  float: right;
  visibility: hidden;
}

li:hover + .cde-pic {
  position: relative;
  left: -20px;
  visibility: visible;
}

<div class="work-abcde">
  <ul>
    <li>
      <h3>abc bcd cde</h3>
    </li>
    <li>
      <h4><a class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4>
    </li>
    <li>
      <h4><a class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4>
    </li>
    <li>
      <h4><a class="cde" href="www.cde.com" rel="nofollow"> cde </a> </h4>
    </li>
    <div class="cde-pic">
      <img src="https://dummyimage.com/200x200/000/fff">
    </div>
  </ul>
</div>

解决方案 2：

将<div> 移动到<li>，因此它们成为兄弟（cde 和cde-pic）。

.work-abcde a:hover {
  color: #61c261;
}

.cde-pic {
  position: relative;
  width: -100px;
  top: -100px;
  float: right;
  visibility: hidden;
}

.cde:hover + .cde-pic {
  position: relative;
  left: -20px;
  visibility: visible;
}

<div class="work-abcde">
  <ul>
    <li>
      <h3>abc bcd cde</h3>
    </li>
    <li>
      <h4><a class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4>
    </li>
    <li>
      <h4><a class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4>
    </li>
    <li>
      <h4>
        <a class="cde" href="www.cde.com" rel="nofollow"> cde </a>
        <div class="cde-pic">
          <img src="https://dummyimage.com/200x200/000/fff">
        </div>
      </h4>
    </li>
  </ul>
</div>

【讨论】：

@kmartin 谢谢，你是对的。我应该使用+ 然后它将针对下一个cde-pic 类。
非常感谢您提供清晰的解释、额外的来源和解决方案。

【解决方案2】：

你使用的这个选择器...

.cde:hover .cde-pic { ... }

...不能工作，因为.cde-pic 不是 .cde 的子元素。

【讨论】：

非常感谢您的建议

【解决方案3】：

尝试以下方法：

.work-abcde a:hover{
  color: #61c261;
  }

  .cde-pic{
  position: relative;
  top: -100px;
  float: right;
  display:none;
  }

.cde:hover:after {
  content: url("//images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"); /* no need for qoutes */
   position: relative;
  display:block;
  left: -20px;
}

<div class="work-abcde">
<ul>
<li><h3>abc bcd cde</h3></li>
<li><h4><a class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4></li>
<li><h4><a class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4></li>
<li><h4><a class="cde" href="www.cde.com" rel="nofollow"> cde</a> </h4> </li>
</ul>
</div>

【讨论】：

【解决方案4】：

用 JS 解决... 代码如下：

function chbg(vis) {
    document.getElementById('cde').style.visibility = vis
}

.work-abcde a:hover {
  color: #61c261;
}

.cde-pic {
  position: relative;
  float: right;
  visibility: hidden;
}

.cde:hover .cde-pic {
  position: relative;
  left: -20px;
  visibility: visible;
}

a:hover > .cde-pic {
  visibility: visible;
}

<div class="work-abcde">
  <ul>
    <li>
      <h3>abc bcd cde</h3>
    </li>
    <li>
      <h4><a onmouseover="chbg('visible')" onmouseout="chbg('hidden')"  class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4>
    </li>
    <li>
      <h4><a onmouseover="chbg('visible')" onmouseout="chbg('hidden')" class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4>
    </li>
    <li>
      <h4><a onmouseover="chbg('visible')" onmouseout="chbg('hidden')" class="cde" href="www.cde.com" rel="nofollow"> cde</a> </h4>
    </li>
    <div class="cde-pic" id="cde"><img src="http://lorempixel.com/200/200/"></div>
  </ul>
</div>

希望对你有帮助！

【讨论】：

JavaScript 在这种情况下是多余的。
非常感谢，肯定有帮助！