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

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

html css

Html 如何在将鼠标悬停在链接上时显示此固定图像？,html,css,Html,Css,不知道我在这方面哪里出了问题。我已经试过几次了，在网上找到了一些帖子，这些帖子显示它是有效的，但对我来说并不适用我想这样做，当我将鼠标悬停在“li”中下面的任何链接上时，它会改变链接的颜色（这正在工作），并在页面左下角以固定位置显示图像如果我在CSS中为图像显示：block，则图像的位置正确且有效目前，我在CSS中将它设置为“无”，并将它设置为“a:hover>.image”中的display:block，但它在hover上不起作用 <body> <div class="

不知道我在这方面哪里出了问题。我已经试过几次了，在网上找到了一些帖子，这些帖子显示它是有效的，但对我来说并不适用

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

如果我在CSS中为图像显示：block，则图像的位置正确且有效

目前，我在CSS中将它设置为“无”，并将它设置为“a:hover>.image”中的display:block，但它在hover上不起作用

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

我相信错误在于选择器。您正在尝试选择嵌套的子元素（a），然后选择与父元素相邻的元素。这不能用纯CSS实现，顾名思义，“层叠样式表”只支持层叠（向下）方向的样式，而不支持层次结构上的样式

请参阅：

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

$（“.link>ul>li>a”）.hover（函数（）{
$（“.image”）.addClass（“显示块”）；
}，函数（）{
$（“.image”）.removeClass（“displayblock”）；
});
/*更改字体和颜色*/
：根{
--bgcolor:#FFFFFF；
--linkcolor:#DCDC；
}
/*-----------------------------------------------------------*/
身体{
背景图片：url（'../background/15795150563.jpg'）；
背景色：#FFFFFF；
背景尺寸：封面；
}
.一切{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
}
.链接{
显示：内联块；
利润率：1%；
高度：185px；
宽度：自动；
文本对齐：左对齐；
左：5%；
右：5%；
背景色：var（--bgcolor）；
边界半径：8px；
盒影：2PX2PX8PX000000；
}
.盒子{
宽度：100vw；
}
保险商实验室{
填充内联开始：0；
列表样式：无；
}
a{
显示：块；
线高：2.4em；
字体系列：var（--font）；
颜色：var（--linkcolor）；
字号：1rem；
文字装饰：无；
大纲：无；
过渡：.2s；
}
.形象{
内容：url（“../images/thumbs_up.png”）；
高度：200px；
显示：无；
位置：固定；
底部：0px；
左：0px；
背景：蓝色；
}
a:悬停{
颜色：#7C7C；
}
.显示块{
显示：块；
}

























正如@Manjuboyz所说，悬停只影响儿童及其兄弟姐妹。
你必须使用JS。最接近纯HTML和CSS的解决方案是这个（但它很难看，不推荐）：

：根目录{
--bgcolor:#FFFFFF；
--linkcolor:#DCDC；
}
/*-----------------------------------------------------------*/
身体{
背景图片：url（'../background/15795150563.jpg'）；
背景色：#FFFFFF；
背景尺寸：封面；
}
.一切{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
}
.链接{
显示：内联块；
利润率：1%；
高度：185px；
宽度：自动；
文本对齐：左对齐；
左：5%；
右：5%；
背景色：var（--bgcolor）；
边界半径：8px；
盒影：2PX2PX8PX000000；
}
.盒子{
宽度：100vw；
}
保险商实验室{
填充内联开始：0；
列表样式：无；
}
a{
显示：块；
线高：2.4em；
字体系列：var（--font）；
颜色：var（--linkcolor）；
字号：1rem；
文字装饰：无；
大纲：无；
过渡：.2s；
}
.形象{
内容：url（“https://upload.wikimedia.org/wikipedia/commons/0/02/Stack_Overflow_logo.svg");
高度：200px；
显示：无；
位置：固定；
底部：0px；
左：0px；
}
a:悬停>.image{
显示：块
}
a:悬停{
颜色：#7C7C；
}

























我怀疑你能有这样的东西，因为悬停
只对子项
及其兄弟项有效果。谢谢你的帮助，我明白你的意思了，只使用HTML和CSS并不是很优雅。从我上次做这些事情到现在已经有好几年了，在目前的情况下，我想我会这样做，学习新的东西。我已经用前面的一条评论解决了这个问题，使用Jquery。谢谢你，我不确定他们是否在CSS中添加了新的东西，因为我已经好几年没有做过web编程了。这对我来说是一个很好的机会来重新学习这一切。Jquery很有帮助，谢天谢地，我能理解它，尽管我以前从未做过。没问题！对不起，我
/*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;
}