Html/CSS - Hover Link Color

HTML / CSS - Hover Link Color

Give your links an ID:

<a id="page1" href="http://www.my-website09090909.com/page1">Page 1</a>
<a id="page2" href="http://www.my-website09090909.com/page1">Page 2</a>
<!-- .... -->

And then use this css:

#page1:hover { color: red; }
#page2:hover { color: blue; }
/* ... */

Change link color on div hover

The problem is selector specificity. Select the anchor as well:

.thumbnail-container:hover,
.thumbnail-container:hover a {
  color: #0088cc;
}

Or depending on what you want you may use inherit. Just add this:

.thumbnail-container a {
  color:inherit;
}

Different hover link colors for bold text and regular text

You should just use different selectors. One with the b parent and another without.
This would work as long as the bold link text is achieved using the b tag around the hyperlink.

a:hover {

  color: #cccccc;

}

b > a:hover {

  color: #cccc00;

}

<b>

<a href="google.com"> A Bold link</a> 

</b>

<p><a href="google.com"> A normal link</a>

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>

Temporarily change the hyperlink color and it's hover color when hovering the container

I found a solution that changes colors without having to touch the objects themselves. The solution only changes colors in variables. It only considers modern browsers with CSS3 that supports "var" function.

First, I defined 2 colors in variables:

:root {
   --normal-color: green;
   --hover-color: red;
}

and set the classes as:

.product a { color: var(--normal-color); }
.product:hover a { color: var(--hover-color); }

now all I need to do is dynamically change the variables:

$(':root').css('--normal-color','blue');
$(':root').css('--hover-color','yellow');

so, the new link color is blue and when I mouse over the container (.product), the link will be yellow.

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;}

Changing color of link on hover of a div

You need to style the anchor, not the div. Try this:

div {

  border: 1px solid black;

  padding: 15px;

}

div:hover a {

  color: red;

}

<div>

  <a href='www.google.com'> www.google.com </a>

</div>

---

Related Topics