Question

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

我尝试了什么：

设置原始不透明度= 0 - 悬停不透明度= 1 - ＆gt;不起作用
设置原始 display = none - 悬停 display = block - ＆gt;不起作用

问题：有没有办法让图片显示文字变绿？

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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

解决方案1：

<li>和<div>是兄弟姐妹。所以使用li悬停而不是类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>

Answer 2

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

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

...无效，因为.cde-pic 不是.cde的子元素。

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

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

希望它有所帮助！

CSS：将鼠标悬停在某个链接上但不显示图片

4 个答案:

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

解决方案1：

解决方案2：