0

我有一个容器<div>，我可以在其中动态插入我无法控制的第三方内容，换句话说，我得到了我得到的东西。

如果第三方网站上插入的元素具有悬停状态，我已经将该悬停颜色存储为十六进制颜色；我无法将其存储为样式，因为此颜色变量是动态更新的。

我想要做的是将该悬停颜色变量应用于落在我的容器内的元素。

如果我提前编码样式，我可以让它工作，但是，正如我所说，我事先不知道它，所以我不能这样做。这个简单的代码确实有效，使链接处于橙色悬停状态。（见我的工作小提琴。）：

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

但是，我必须使用存储的悬停颜色变量hoverClass并应用它，但我无法让它工作。我试过这个，但它不工作。（请参阅我正在尝试制作的小提琴。）：

<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>
4

3 回答 3

4

.hovering, #container a:hover {color: orange;}不是一个类，它是一个 CSS 规则。

如果您需要将颜色作为变量，我建议更改为以下内容：

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

或者，更简单的解决方案是使用 jQuery 添加样式：

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

-- 工作小提琴 --

于 2012-09-25T15:04:28.350 回答
0

您正在尝试传递 addClass css 值。

addClass 只是将类名添加到元素。您需要在样式表中定义 css 规则的作用。

像这样。http://jsfiddle.net/cKpLk/27/

例子：

<script>
        var hoverClass = 'hovering';

        $('#container a').hover(function() {
            $(this).addClass(hoverClass);
        }, function() {
            $(this).removeClass(hoverClass);
        });
</script>
<style>
        .hovering, #container a:hover {color: orange;}
</style>
<div id="container">
    <a href="something">
        some link
    </a>    
</div>
于 2012-09-25T15:04:50.323 回答
0 
    var hovercolor = 'red';
$(function() {
    $("#container a").hover(function() {
        $("#container a").css('color', hovercolor);
    }, function() {
        $("#container a").css('color','');
    });
});​
于 2012-09-25T15:17:36.183 回答