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

Question

I have a DIV and an A tag inside it, like this:

<DIV CLASS="product"><A HREF="...">blah</A></DIV>

I want to change the "A" text color when the user mouse-over the DIV, so my CSS is:

.product a { color:blue; }
.product:hover a { color:red; }

As CSS, works. But I'm creating a "template configurator" and I want to show a preview to the user, changing the colors dynamically using jQuery, something like this:

$('.product a').css('color','green');
$('.product:hover a').css('color','yellow');

Nothing happens... On Chrome's inspector I can see the definition as "accepted". But if I try to read...

16:03:16.250 $('.product:hover a').css('color')
16:03:16.255 undefined

Any idea why and how to fix?

---

Update

• Normal: "A" is the green text. Mouse over the 1 pixel border to trigger div:hover (mouse not over "A").
• Now: "A" text is red. Move out, outside the DIV.
• Now: backs to the original green text.

I want to change dynamically the red color to yellow, for example, using jQuery.

Answer 1

If you don't want to permanently change the colour on hover, then you could keep it simple and just apply a class on hover, and use it to specify the CSS for your preview.

UPDATE: jQuery-only Solutions Based on your latest comments and edit, you cannot add classes to the CSS. So lets do it using nothing but jQuery!

1. Add CSS styles with jQuery (keeps the flexibility of CSS classes)

The example below still uses the power and flexibility of css classes but without the need to change the HTML or CSS:

• Creates new CSS rules directly in jQuery - this lets you easily set up the alternative styles in CSS for the preview class, e.g.:

$("<style>.preview .product:hover a{color:yellow;}</style>").appendTo("head");

• adds the preview class to the container on mouseover and removes it on mouseout

$("<style> \
.preview .product a { color:green; } \
.preview .product:hover a { color:yellow; } \
</style>").appendTo("head");

$("#container").mouseover(function() {
  $("#container").addClass('preview');
}).mouseout(function() {
  $("#container").removeClass('preview');
});

.product a { color:blue; }
.product:hover a { color:red; }
/* for demo only */
#container { padding: 10px;  background: #f5f5f5;}
#container div {  padding: 10px; margin:20px;  border: 1px solid grey; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="product">
    <a href="...">hover colour changes when div is hovered</A>
  </div>
</div>

---

2. Save the default colours and restore on mouseout

As I mentioned previously, another option is to use variables to save the original colours, replace them with the temporary colours on mouseover and restore the original values on mouseout. As I also mentioned, this means storing variables for all the styles that will be changed and can get unwieldy and difficult to maintain if you have many.

However I've expanded on this below with an example in case it is something you want to try.

// decalre variables to save the default colours
var origColor = $('.product a').css('color');
var origColorHover;  // we can't set this until the link is hovered

$(".product").mouseover(function() {
    // save hover colour
    if (origColorHover == "")  origColorHover = $(this).css('color');    
    // set the temporary hover colours
    $('.product a').css('color','green');
    $('.product a:hover').css('color','yellow');
}).mouseout(function() {
    // reset the original colour after hovering
    $('.product a').css('color', origColor);
    $('.product a:hover').css('color', origColorHover);
});

.product a { color:blue; }
.product a:hover { color:red; }
/* for demo only */
#container { padding: 10px;  background: #f5f5f5;}
#container div {  padding: 10px; margin:20px;  border: 1px solid grey; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="product">
    <a href="...">hover colour changes when link is hovered</A>
  </div>
</div>

---

PREVIOUS EXAMPLES (might be helpful to other users with similar questions):

3. Use CSS classes for the alternative colours and apply the class on hover

The example below uses CSS classes to set up the alternate styling for the elements, and used jQuery to add the class to a container on mouseover e.g.:

$(".product").mouseover(function() {
  $("#container").addClass('preview');
}).mouseout(function() {
  $("#container").removeClass('preview');
});

.product a { color:blue; }
.product:hover a { color:red; }

.preview .product a { color:green; }
.preview .product:hover a { color:yellow; }

/* for demo only */
#container div { padding: 10px; margin: 10px; background: lightgrey;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <DIV CLASS="product">
    <A HREF="...">hover colour changes when div is hovered</A>
  </DIV>
</div>

Its difficult to say without knowing how your project works, but in general terms this sounds like a more maintainable and adaptable way to apply different template colours anyway?

You can set up a whole different stylesheet for the .preview and if you wish, and simply applying that class can change multiple styles at once. e.g. the example below applies a new set of styles to all elements, or if you only want to show it on a per-div basis, you apply the class to the div instead.

$("#container").mouseover(function() {
    $(this).addClass('preview');
}).mouseout(function() {
    $(this).removeClass('preview');
});

.product a { color:blue; }
.product:hover a { color:red; }
.product2 a { color:green; }
.product2 a:hover { color:yellow; }

.preview { text-align: center;}
.preview .product a { color:green; }
.preview .product:hover a { color:orange; }
.preview .product2 a { color:purple; font-weight: bold; }
.preview .product2 a:hover { color:yellow; }

/* for demo only */
#container { padding: 10px;  background: #f5f5f5;}

#container div {  padding: 10px; margin:10px;  border: 1px solid grey; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <DIV CLASS="product">
    <A HREF="...">hover colour changes when container is hovered</A>
  </DIV>
  <DIV CLASS="product2">
    <A HREF="...">hover colour changes when link is hovered</A>
  </DIV>
</div>

Answer 2

This is a working example of changing color and previewing.

$(document).ready(function () {
  $('#container .product a').hover(function () {
    if (isPreviewActive()) {
      $(this).css('color', $('#hover').val());
    }
  }, function () {
    if (isPreviewActive()) {
      $(this).css('color', $('#color').val());
    }
  });

  $('#checkbox').change(function () {
    if (this.checked) {
      $('.product a').css('color', $('#color').val());
    } else {
      $('.product a').css('color', '');
    }
  });
});

function isPreviewActive() {
  return $('#checkbox')[0].checked;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div class="product"><a href=="#">blah</a></div>
</div>

<p>
  <label>Color:</label>
  <input id="color" type="text" value="red"></input>
  <label>Hover:</label>
  <input id="hover" type="text" value="yellow"></input>
</p>
Enable Preview? <input type="checkbox" id="checkbox"></input>

Answer 3

If you want to set the hover color using jquery, you need to use the hover method on the given object

$(".product a").hover(
    function() {
        $(this).css("color", "yellow");
    },
    function() {
        $(this).css("color", "green");
    }
);

CodePen

Answer 4

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.