CSS

Question

我今天遇到了很多小时的问题，我无法解决这个问题，也许你可以帮助我，我正在尝试将鼠标悬停在内部图像上时更改边框的颜色 link（<a> 标签）。

我也在使用 bootstrap.min.css 做其他事情，但我设法构建了一个小测试用例，以便您可以确认您环境中的问题。

为了模拟我的问题，我在这里隔离了一个小测试的所有代码：

我的HTML文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
    <a class="thumbnail" href="/Details/GetCategoryDetail/2">
        <img src="http://placehold.it/400x250/000/fff" alt="" />
    </a>
</body>

我的 CSS 文件

a:hover{

    border-color: blue;
    border-width: 10px;
}

a {    
    border-color:red;
    border-width:10px;
}

无论如何，每次我将鼠标悬停在图像上时，颜色都保持不变（蓝色）。我使用 chrome 做了一个检查元素，并且选择了颜色 "BLUE"，不是绿色，也不是我上面配置的红色...

这很奇怪，我无法理解。我还尝试了以下方法：

thumbnail a{
    border-color:red;
    border-width:10px;
}

thumbnail a:hover{
    border-color:red;
    border-width:10px;
}

没有成功..

我什至试过这个：

thumbnail a img{
    border-color:red;
    border-width:10px;
}

thumbnail a img:hover{
    border-color:red;
    border-width:10px;
}

也没有用...关于发生了什么的任何线索？谢谢！！

Answer 1

您需要 select 图片并将边框应用到图片，而不是包含 link 的标签。在这种情况下，您的锚标记没有 height/width，因此无法将边框直接应用于锚标记。相反，当 link 悬停时，为图像应用边框。

a:hover img{
    border-color: blue;
}

a img {    
    border: 10px solid red;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
    <a class="thumbnail" href="/Details/GetCategoryDetail/2">
        <img src="http://placehold.it/400x250/000/fff" alt="" />
    </a>
</body>

CSS - 无法控制图像的边框颜色 Link

CSS - Can't control border color of Image Link

image

border

colors

twitter-bootstrap