我有一个位于屏幕中心的图像,我希望周围有一个边框,当鼠标悬停在该图像上时会改变颜色。正如您在下面的代码中看到的那样,我正在尝试执行此操作,但问题是图像只是一个链接但没有边框,这是怎么回事?
html代码:
<div id="container">
<div id="content">
<div class="10Img">
<a href=""><img src="10Pimg.png" alt="10img" style="width:900px; height:200px"></a>
</div>
</div>
</div>
CSS 代码:
#content{
padding-bottom: 200px;
position: absolute;
float: left;
left: 50%;
margin-left: -450px;
top: 200px;
}
#container{
height:100%;
}
.10Img{
border: 2px solid grey;
}
.10Img a:hover{
outline: 2px solid black;
}
最佳答案
主要问题是您以数字字符更改 10Img
开始您的类(class)名称,并以字母字符开始。
前任。我将它从 10Img 更改为 aImg
然后就可以使用了
.aImg img {
border: 2px solid grey;
}
或仅
.aImg {
border: 2px solid grey;
}
关于html - 图像边框悬停不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28980287/