图片边框悬停不起作用答案

【问题标题】：Image border hover won't work图片边框悬停不起作用
【发布时间】：2015-05-12 20:51:12
【问题描述】：

我有一个位于屏幕中心的图像，我想要一个边框，当悬停在它上面时会改变颜色。正如您在下面的代码中看到的那样，我正在尝试这样做，但问题是图像只是保持链接但没有边框，有什么问题？

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

【问题讨论】：

标签： html css image hover border

【解决方案1】：

主要问题是您的班级名称以数字字符更改10Img 开头，并以字母字符开头。前任。我把它从 10Img 改成 aImg

然后就可以使用了

.aImg  img {
 border: 2px solid grey;
}

或者只有

.aImg {
     border: 2px solid grey;
    }

【讨论】：

【解决方案2】：

试试这个：Demo

a img {
    border: 2px solid grey;
}
a img:hover {
    border: 2px solid black;
}

【讨论】：

【解决方案3】：

看到这个Demo

.Img{border: 2px solid grey;}
.Img a:hover{
outline: 2px solid black;}

注意：类名不能以整数开头。

有关命名规则，请参阅This。

【讨论】：

【解决方案4】：

您的 css 类 10Img 不起作用，因为 css 类名不能以数字开头，请参阅：

Which characters are valid in CSS class names/selectors?

因此，如果您将班级称为 Img10 而不是 10Img，它应该可以工作。

<div id="container">
    <div id="content">
        <div class="Img10">
            <a href=""><img src="http://dummyimage.com/900x200/000/fff" alt="10img" style="width:900px; height:200px" /></a>
        </div>
    </div>
</div>

您也可能希望在div 上设置:hover 边框，而不是在a 上：

#content{
    padding-bottom: 200px;
    position: absolute;
    float: left;
    left: 50%;
    margin-left: -450px;
    top: 200px;
}

#container{
    height:100%;
}

.Img10{
    border: 2px solid grey;
}

.Img10:hover{
    outline: 2px solid black;
}

这是一个有效的小提琴： http://jsfiddle.net/k2Ld7yfe/

【讨论】：