Question

我有这样的div ......

<div class="service_circle">
    <i class="fa fa-briefcase service_circle_icon"></i>
    <h5 class="service_circle_heading">Briefcase details</h5>
    <p class="service_circle_desc">We provide professional website design</p>
</div>

我想使用jQuery将style="background-color:red;"应用于<i>元素。我写过这样的话：

<script type="text/javascript">
    $(document).ready(function () {
        $(".service_circle").mouseenter(function () {
            $("this").next("i").attr("style", "background-color:red !important;");
        });
    });
</script>

它不起作用。请帮我解决这个问题。

Answer 1

使用find()来获取子i元素和css()方法：

$(this).find("i").css("background-color", 'red');

另请注意，最好在CSS中设置样式并向元素添加类。试试这个：

.red { color: red; }

$(this).find("i").addClass('red');

Answer 2

您需要使用.find()让孩子i然后使用.css()方法。

$(".service_circle").mouseenter(function () {
    $(this).find("i").css("background-color","red");
});

并且this不应该在引号中。它指的是调用事件的元素。

Answer 3

现在你可以用css

了

CSS : hover Selector

.service_circle:hover i{
background-color:red;
}

Answer 4

$(".service_circle").hover(function () {
    $(this).find("i").addClass('red');
},
    $(this).find("i").removeClass('red');
);

使用addClass

更好地处理removeClass和hover

Jquery为元素添加样式

4 个答案: