Question

我最近开始学习jQuery，现在我遇到了这个问题，一切按预期工作，但在点击功能执行后，jquery悬停功能无效...

＆＃13;

$(function(){
    $("div.star").hover(function(){
        $(this).addClass("star-hover");
    });

    $("div.star").mouseout(function(){
        $(this).removeClass("star-hover");
    );
});

$(function(){
    $("div.star").click(function(){
        $(this).addClass("star-chosen");
    });
});

＆＃13;

.star {
     height: 2em;
     width: 2em;
     border: .1em solid black;
     border-radius: 1.1em;
     display: inline-block;
     margin: 0;
     padding: .1em;
}

.star-hover {
    background-color: blue;
}

.star-chosen {
    background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
</div>

＆＃13;

Answer 1

当元素同时具有类tar -xf hugeFile.tar -O | head -n10000 | yourSoftware和<VirtualHost 192.168.1.55:80> ServerAdmin admin@example.com DocumentRoot /var/www/r.example.com ServerName r.example.com ServerAlias * ErrorLog /var/www/r.example.com/logs/error_log CustomLog /var/www/r.example.com/logs/custom_log common <Directory "/var/www/r.example.com"> Options FollowSymLinks AllowOverride All Order allow,deny Allow from all </Directory> </VirtualHost>时，关于应用star-hover的问题确实存在问题。

为什么不使用css star-chosen：

background-color

你的js：

:hover

http://jsfiddle.net/yyqwkaqp/

如果您正在寻找jQuery方法，则必须将.star { height: 2em; width: 2em; border: .1em solid black; border-radius: 1.1em; display: inline-block; margin: 0; padding: .1em; } .star:hover { background-color: blue; } .star-chosen { background-color: red; }添加到$(function(){ $("div.star").click(function(){ $(this).addClass("star-chosen"); }); });：

!important

http://jsfiddle.net/d8wmhmrp/

但我更喜欢star-hover解决方案

Answer 2

在.star-hover之后写入CSS .star-hover，它可以帮助你

为什么要在悬停时添加课程？它可以使用CSS 看到这个解决方案：

＆＃13;

$("div.star").click(function () {
  $(this).addClass("star-chosen");
});

＆＃13;

.star {
    height: 2em;
    width: 2em;
    border: .1em solid black;
    border-radius: 1.1em;
    display: inline-block;
    margin: 0;
    padding: .1em;
}
.star-chosen {
    background-color: red;
}
.star:hover {
    background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
</div>

＆＃13;

在jquery点击功能悬停不起作用之后

2 个答案: