DarkLink DarkLink - 2 months ago 5
CSS Question

CSS - Can't control border color of Image Link

I am facing a problem for many hours today, I can't get this fixed, maybe you can help me, I am trying to change the color of the border when hovering the mouse on a image inside link ( tag).

I am also using bootstrap.min.css for other stuff, but I managed to build a small test case so you can confirm the problem on your environment.

To simulate my problem I isolated all the code for a small test here it is:

My HTML File:

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


My CSS File

a:hover{

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

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


Anyway the color keeps the same (blue) every time I place the mouse hover the image. I did an inspect element using chrome, and there is the color selected "BLUE", not green neither red as I configured above...

This is very weird, I can't get it.
I also tried the following:

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

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


Didn't work..

I even tried this one:

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

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


Also didn't work... any clue about what is happening?
Thank you!!

Answer

You need to select the image and apply your border to the image, not the containing link tag. Your anchor tag in this case doesn't have a height/width, so a border cannot be applied directly to the anchor tag. Instead, apply a border to the image when the link is hovered on.

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>

Comments