How to Change Background-Color on Text Links on Hover But Not Image Links

How to change background-color on text links on hover but not image links

I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any...
About images with that bottom gap, you could do the following:

a img{vertical-align:text-bottom;}

This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.

For the transparent images, you should use a class.

I really hope that's solved in CSS3, by implementing a parent selector.

Why :hover changes just background-color, but doesn't change link color?

Change the color on li:hover to change text color but also set color to inherit on the a:link itself

ul {

    color:blue;

    list-style-type: none;

    width: 200px;

    padding: 0px;

    margin: 0px;

}

a {

    text-decoration: none;

}

li {

    border: 1px solid blue;

    padding: 7px 5px 8px 5px;

    margin: 5px 0px 5px 0px;

    font-family: Arial;

    font-size: 13px;

    font-weight: bold;

    background-color: #3a3939;

    border-color: black;

}

li:hover{  /* Here looks everything fine */

    background-color: white;

    cursor: pointer;

    border-color: black;

    color: black; /* Add this here */

}

a:link, a:visited {

    color: inherit; /* make this color reflect li:hover's color using inherit*/

}

<html lang="ru">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="styles.css" rel="stylesheet">

    <title>Document</title>

</head>

<body>

<ul>

    <li><a href="#">Главная</a></li>

    <li><a href="#">Новости</a></li>

    <li><a href="#">Контакты</a></li>

    <li><a href="#">О компании</a></li>

    <li><a href="#">Как добраться</a></li>

</ul>

</body>

</html>

How to make the link inside Button change color on hover without hovering over link

Probably you didn't add padding to the <a> tag. it need to add padding or width to define a area to hover over. if you add padding in parent <li>, therefore you need to hover over the <li> to change the color of the <a> tag.

.nav{overflow:hidden}

.nav ul{list-style:none; text-align:center;}

.nav ul li{display:inline-block; vertical-align:top}

.nav ul li a{display:block; padding:10px 20px; background-color: silver; color: black}

.nav ul li a:hover{background-color: darkgrey; color: white}

<div class="nav">

  <ul>

    <li><a href="#!">Link</a></li>

    <li><a href="#!">Link</a></li>

    <li><a href="#!">Link</a></li>

    <li><a href="#!">Link</a></li>

  </ul>

</div>

How Do I Remove Link Hover From Images But Not Text?

This should work this:

.tumblr-box:hover {
    background: transparent;
}

But make sure the class .tumblr-box is on every image thumbnail and not on the text.

Image link isnt clickable after hover effect has been applied

Yes, you can add pointer-events: none; to your .overlay rules:

.container {

  position: relative;

  width: 200px;

  height: 200px;

  display: inline-block;

}

.image {

  display: block;

  width: 200px;

  height: 200px;

}

.overlay {

  position: absolute;

  transition: all .3s ease;

  opacity: 0;

  background-color: #eee;

  pointer-events: none;

}

.container:hover .overlay {

  opacity: 1;

}

.text {

  color: white;

  font-family: sans-serif;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 20px;

}

.overlayFade {

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  background-color: #00b1bab3;

}

.container:hover .overlayLeft {

  width: 100%;

}

<div class="container">

  <a href="/carportSpidsTag.jsp"><img src="./IMAGES/fladtTag.png" class="image"></a>

  <div class="overlay overlayFade">

    <div class="text">Fade</div>

  </div>

</div>

Changing the color of an image link on hover

Give a background color to your A element,

than on .imglink:hover img{ } handle the image opacity

An example would be:

DEMO

a.imglink{
  background:         #000;
  display:            inline-block;
}
a.imglink img{
  vertical-align:     middle;
  transition:         opacity 0.3s;
  -webkit-transition: opacity 0.3s;
}
a.imglink:hover img{
  opacity:            0.5;
}

How do I stop a link changing color on hover?

Change this code:

.emaillink2
{   text-decoration: none;
color: white;}

to this code:

.emaillink2, .emaillink2:hover
{   text-decoration: none;
color: white;}

How to Change Background-Color on Text Links on Hover But Not Image Links