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

【问题标题】：How to get this fixed image to display when hovering over a link?将鼠标悬停在链接上时如何显示此固定图像？
【发布时间】：2020-06-07 23:35:19
【问题描述】：

不知道我哪里出了问题。我已经尝试了几次，发现网上的帖子显示它有效，但它不适合我。

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

如果我在图像的 CSS 中显示：块，图像的位置正确并且可以工作。

我目前在图像的 CSS 中将其设置为 none，并将其设置为 display: block in "a:hover > .image"，但它在悬停时不起作用。

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

【问题讨论】：

  • 我怀疑你能有这样的东西，因为hover 只对child 和它的siblings 有效。

标签： html css


【解决方案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>

【讨论】：

  • 谢谢你，不确定他们是否在 CSS 中添加了任何新东西，因为我已经有几年没有做过网络编程了。这是我重新学习所有这些的好机会。 Jquery 有帮助，幸好我能理解它，尽管我以前从未做过。
  • 没问题！抱歉，我本可以更好地解释那部分。大体思路是制作一个包含你想要的悬停效果的类（display:block），选择目标悬停元素，为悬停添加事件监听器，悬停时将该类添加到链接中，不添加时删除该类悬停。如果您不想使用 jQuery 库，也可以使用纯 Javascript 复制这个想法。 （= 欢迎回来！
【解决方案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 或其他库。

希望对您有所帮助！祝你好运！

【讨论】：

  • 感谢您的帮助，我明白您的意思，仅使用 HTML 和 CSS 就不太优雅了。自从我上次这样做以来已经有好几年了，在目前的情况下，我想我会这样做并学习新事物。我已经使用 Jquery 用以前的 cmets 解决了它。
猜你喜欢
  • 1970-01-01
  • 2017-03-06
  • 2013-08-27
  • 2019-02-18
  • 2017-10-01
  • 1970-01-01
  • 2011-10-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode