Question

不知道我在哪里出错了。我已经试过几次了，在网上发现了一些可以显示它正常工作的帖子，但是它并不适合我。

我要这样做，以便当我将鼠标悬停在“ li”中下面的任何链接上时，它会更改链接的颜色（这是有效的）并在页面的左下方显示图像固定位置。

如果我确实在图像的CSS中显示display：block，图像就可以正确定位并工作了。

我目前在图片的CSS中将其设置为none，并在“ a：hover> .image”中将其设置为display：块，但是在悬停时不起作用。

<body>
<div class="everything">

    <div class="image"></div>

    <div class="box">
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
    </div>
</div>

这是CSS。

/*Change font and colors*/
:root {
    --bgcolor:  #FFFFFF;
    --linkcolor: #DCDCDC;
}

/*-----------------------------------------------------------*/

body {
    background-image: url('../background/1579515150563.jpg');
    background-color: #FFFFFF;
    background-size: cover;
}

.everything {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.link {
    display: inline-block;
    margin: 1%;
    height: 185px;
    width: auto;
    text-align: left;
    padding-left: 5%;
    padding-right: 5%;
    background-color: var(--bgcolor);
    border-radius: 8px;
    box-shadow: 2px 2px 8px #000000;
}

.box {
    width: 100vw;
}

ul {
    padding-inline-start: 0;
    list-style: none;
}

a {
    display: block;
    line-height: 2.4em;
    font-family: var(--font);
    color: var(--linkcolor);
    font-size: 1rem;
    text-decoration: none;
    outline: none;
    transition: .2s;
}

.image {
    content:url("../images/thumbs_up.png");
    height:200px;
    display: none;
    position: fixed;
    bottom:0px;
    left:0px;

}

a:hover > .image {
    display:block
}

a:hover {
    color: #7C7C7C;
}

Answer 1

我认为错误在于选择器中。您尝试选择一个嵌套子元素（a），然后选择与父元素相邻的元素。顾名思义，这不能使用纯CSS来完成，“级联样式表”仅支持级联（向下）方向的样式，而不支持层次结构上的样式。

请参阅：How to style the parent element when hovering a child element?

相反，您可以使用jQuery / Javascript实现相同的效果。 jQuery示例（我在“ image”元素中添加了蓝色背景，以便可以看到结果）：

$(".link > ul > li > a").hover(function() {
  $(".image").addClass("displayblock");
}, function() {
  $(".image").removeClass("displayblock");
});

/*Change font and colors*/
:root {
    --bgcolor:  #FFFFFF;
    --linkcolor: #DCDCDC;
}

/*-----------------------------------------------------------*/

body {
    background-image: url('../background/1579515150563.jpg');
    background-color: #FFFFFF;
    background-size: cover;
}

.everything {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.link {
    display: inline-block;
    margin: 1%;
    height: 185px;
    width: auto;
    text-align: left;
    padding-left: 5%;
    padding-right: 5%;
    background-color: var(--bgcolor);
    border-radius: 8px;
    box-shadow: 2px 2px 8px #000000;
}

.box {
    width: 100vw;
}

ul {
    padding-inline-start: 0;
    list-style: none;
}

a {
    display: block;
    line-height: 2.4em;
    font-family: var(--font);
    color: var(--linkcolor);
    font-size: 1rem;
    text-decoration: none;
    outline: none;
    transition: .2s;
}

.image {
    content:url("../images/thumbs_up.png");
    height:200px;
    display: none;
    position: fixed;
    bottom:0px;
    left:0px;
    background: blue;

}

a:hover {
    color: #7C7C7C;
}

.displayblock {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="everything">

    <div class="image"></div>

    <div class="box">
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
        <div class="link">
            <ul>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
                <li><a href="">Lorem</a></li>
            </ul>
        </div>
    </div>
</div>

Answer 2

正如@Manjuboyz所说，悬停只会影响孩子及其兄弟姐妹。您必须使用JS。最接近纯HTML＆CSS的解决方案就是这个解决方案（但丑陋，不建议使用）：

:root {
  --bgcolor: #FFFFFF;
  --linkcolor: #DCDCDC;
}


/*-----------------------------------------------------------*/

body {
  background-image: url('../background/1579515150563.jpg');
  background-color: #FFFFFF;
  background-size: cover;
}

.everything {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.link {
  display: inline-block;
  margin: 1%;
  height: 185px;
  width: auto;
  text-align: left;
  padding-left: 5%;
  padding-right: 5%;
  background-color: var(--bgcolor);
  border-radius: 8px;
  box-shadow: 2px 2px 8px #000000;
}

.box {
  width: 100vw;
}

ul {
  padding-inline-start: 0;
  list-style: none;
}

a {
  display: block;
  line-height: 2.4em;
  font-family: var(--font);
  color: var(--linkcolor);
  font-size: 1rem;
  text-decoration: none;
  outline: none;
  transition: .2s;
}

.image {
  content: url("https://upload.wikimedia.org/wikipedia/commons/0/02/Stack_Overflow_logo.svg");
  height: 200px;
  display: none;
  position: fixed;
  bottom: 0px;
  left: 0px;
}

a:hover>.image {
  display: block
}

a:hover {
  color: #7C7C7C;
}

<div class="everything">
  <div class="image" id="image"></div>
  <div class="box">
    <div class="link">
      <ul onmouseover="document.getElementById('image').style.display = 'block';">
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
      </ul>
    </div>
    <div class="link">
      <ul onmouseover="document.getElementById('image2').style.display = 'block';">
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
      </ul>
    </div>
    <div class="link">
      <ul onmouseover="document.getElementById('image').style.display = 'block';">
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
      </ul>
    </div>
    <div class="link">
      <ul onmouseover="document.getElementById('image2').style.display = 'block';">
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
        <li><a href="">Lorem</a></li>
      </ul>
    </div>
  </div>
</div>

如果您选择该选项，则只需使用一个函数：onmouseover =“ myFunction（）”

但是绝对值得使用jQuery或其他库。

希望有帮助！祝你好运！

悬停在链接上时如何显示此固定图像？

2 个答案: