Question

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

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

我希望能够将悬停颜色变量应用于我的容器内的元素。

如果我事先对样式进行编码，我可以使它工作，但正如我所说的，我事先并不知道，所以我不能这样做。这个简单的代码确实有效，使链接成为橙色悬停状态。（见我的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>

但是，我必须使用存储的悬停颜色变量hoverClass并应用它，但我无法使其工作。我尝试了这个，但它不起作用。（见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;}不是一个类，它是一个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>");
});

-- WORKING FIDDLE --

Answer 2

您正在尝试传递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>

Answer 3

    var hovercolor = 'red';
$(function() {
    $("#container a").hover(function() {
        $("#container a").css('color', hovercolor);
    }, function() {
        $("#container a").css('color','');
    });
});

让一个简单的jquery'悬停'工作的问题

3 个答案: