html - 将鼠标悬停在链接更改背景图片上

标签 html css

<分区>

我试图将鼠标悬停在一个链接上,以使用 Adjacent Sibling Selector 更改 div 中的图像,但是当我将鼠标悬停在该链接上时它没有显示任何内容。

<!DOCTYPE HTML>
<html>
<head>

<link rel="stylesheet" href="styletest.css">    
</head>
<body>
<div>

    <a class="a" href="/template-1978944/editor"> ANATOMY NOW
    </a>

    <div class="bg"> </div>

</div>   
</body>
</html>

CSS:

.bg{
 height:100%;
}

.a:hover + .bg {
 background-image: url('https://preview.ibb.co/gce5me/anatomy_Now.png');
}

最佳答案

如果需要填充视口(viewport)的背景,也可以使用height:100vh;

关于html - 将鼠标悬停在链接更改背景图片上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52408525/

上一篇:javascript - react onChange 不从 Div 触发

下一篇:css - 将图标添加到 css 边框的末尾

相关文章:

html - 采取容器高度的动态方式?

javascript - 如果 jquery slideToggle 元素被切换然后隐藏所有其他元素

css - 复选框控制 servlet 中所有相同的 css 类 ID 颜色

html - 应用 :target to HTML elements with different ID

javascript - 如何让这些面板以可滚动的表格格式显示?

css - 萨斯/ bool 玛错误 : Error: File to import not found or unreadable: utilities/mixins. 萨斯

html - Flexbox 未垂直居中内联 block 跨度

css - 谷歌浏览器逆时针旋转但应该是顺时针

html - 具有填充模式的 CSS 动画包括过渡在 Firefox 中无法正常工作

jquery - 自定义输入样式