Question

I have a container <div> into which I dynamically insert third-party content over which I have NO control, in other words, I get what I’m given.

If the inserted element on the third-party website had a hover state I have already stored that hover color as a hex color; I can’t store it as a style, as this color variable is updated dynamically.

What I want to be able to do is apply that hover color variable to the element that’s landed inside my container.

I can make it work if I code the style in advance, but, as I said, I don’t know it in advance so I can’t do so. This simple code does work, giving the link an orange hover state. (See my working fiddle.):

<style>
    .hovering, #container a:hover {color: orange;}
</style>
<script>
    $('#container').hover(function() {
        $(this).addClass('hovering');
    }, function() {
        $(this).removeClass('hovering');
    });
</script>

<div id="container">
    <a href="something">
        some link
    </a>    
</div>    

However, I have to use the stored hover color variable hoverClass and apply it, but I can’t get it to work. I tried this but it’s not working. (See the fiddle I’m trying to make work.):

<script>
    var hoverClass = '.hovering, #container a:hover {color: orange;}';
    $('#container').hover(function() {
        $(this).addClass(hoverClass);
    }, function() {
        $(this).removeClass(hoverClass);
    });
</script>
<div id="container">
    <a href="something">
        some link
    </a>    
</div>    

Answer 1

.hovering, #container a:hover {color: orange;} is not a class, its a CSS rule.

If you need the colour to be a variable, I recommend changing to the following:

<script>
    var hoverColour = "orange";
    $('#container a').hover(function() {
        $(this).css("color", hoverColour);
    }, function() {
        $(this).css("color", "auto");
    });
</script>
<div id="container">
    <a href="something">
        some link
    </a>    
</div>  

---

Alternatively, a simplier solution would be to add the style using jQuery:

$(function(){
    var hoverColor = "orange";
    $("head").append("<style type='text/css'>#container a:hover { color: " + hoverColor + "; }</style>");
});

— WORKING FIDDLE —