Question

我今天面临一个问题已经有好几个小时了，我无法解决这个问题，也许你可以帮助我，当我将鼠标悬停在链接上的图像上时，我试图改变边框的颜色（{ {1}}代码）。

我也在使用bootstrap.min.css来处理其他内容，但我设法构建了一个小测试用例，以便您可以确认环境问题。

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

我的HTML文件：

<a>

我的CSS文件

<!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>

每当我将鼠标放在图像上时，无论如何颜色都保持不变（蓝色）。我使用铬做了一个检查元素，并且选择了颜色＆＃34;蓝色＆＃34;，不是绿色也不是我上面配置的红色......

这很奇怪，我无法得到它。我也尝试了以下内容：

a:hover{

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

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

没有工作..

我甚至试过这个：

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

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

也没有工作...... 任何有关正在发生的事情的线索？谢谢!!

Answer 1

您需要选择图像并将边框应用于图像，而不是包含链接标记。在这种情况下，您的锚标记没有高度/宽度，因此边框不能直接应用于锚标记。而是在链接悬停时对图像应用边框。

＆＃13;

a:hover img{
    border-color: blue;
}

a img {    
    border: 10px solid red;
}

＆＃13;

<!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>

＆＃13;

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

1 个答案: