html - 图像边框悬停不起作用

我在屏幕上居中放置了一个图像，该图像周围是一个边框，将鼠标悬停在该边框上会更改颜色。正如您在下面的代码中看到的那样，我正在尝试执行此操作，但是问题是图像只是保持链接状态，而没有边框，这是怎么回事？

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开头类名，并使用字母字符开头。
例如我将其从10Img更改为aImg

那你可以用

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

或仅

.aImg {
     border: 2px solid grey;
    }

关于html - 图像边框悬停不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28980287/