CODEWITHSUNDEEP
cssimagetwitter-bootstrapcolorsborder
TiagoM
TiagoM

Reputation: 3526

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

Upvotes: 1

Views: 1528

Answers (1)

Shea Hunter Belsky
Shea Hunter Belsky

Reputation: 3238

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>

Upvotes: 1

Related Questions