更改多个元素的类

我想更改位于悬停（包括）和左侧的所有元素的类。更改多个元素的类

HTML：

<div id="head_1" class="left_head active"></div> 
<div id="head_2" class="middle_head active"></div> 
<div id="head_3" class="middle_head active"></div> 
<div id="head_4" class="middle_head inactive"></div> 
<div id="head_5" class="middle_head inactive"></div>

这是它的样子：

现在，当我将鼠标悬停在第三的头，我想对所有头左侧从无效改变类活跃，并且他们全部在右侧从活跃到非活跃（如果他们以前活跃）

来源

2015-11-27 Croolman

检查：https://css-tricks.com/star-ratings/ – Milkmannetje

$("div").hover(
 
    function() { 
 
    $(this).addClass("active"); 
 
    $(this).prevAll().addClass("active"); 
 
    }, 
 
    function() { 
 
    $(this).removeClass("active"); 
 
    $(this).prevAll().removeClass("active"); 
 
    } 
 
);

div { 
 
    width: 20px; 
 
    height: 20px; 
 
    display: inline-block; 
 
    background-color: grey; 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
} 
 

 
.active { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

来源

2015-11-27 19:20:13

这个很简单。随着一些变化和变量（点击div后有类），我已经使用了这个。 – Croolman

.rating { 
 
    float:left; 
 
} 
 

 
/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
 
    follow these rules. Every browser that supports :checked also supports :not(), so 
 
    it doesn’t make the test unnecessarily selective */ 
 
.rating:not(:checked) > input { 
 
    position:absolute; 
 
    top:-9999px; 
 
    clip:rect(0,0,0,0); 
 
} 
 

 
.rating:not(:checked) > label { 
 
    float:right; 
 
    width:1em; 
 
    padding:0 .1em; 
 
    overflow:hidden; 
 
    white-space:nowrap; 
 
    cursor:pointer; 
 
    font-size:200%; 
 
    line-height:1.2; 
 
    color:#ddd; 
 
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5); 
 
} 
 

 
.rating:not(:checked) > label:before { 
 
    content: '★ '; 
 
} 
 

 
.rating > input:checked ~ label { 
 
    color: #f70; 
 
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5); 
 
} 
 

 
.rating:not(:checked) > label:hover, 
 
.rating:not(:checked) > label:hover ~ label { 
 
    color: gold; 
 
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5); 
 
} 
 

 
.rating > input:checked + label:hover, 
 
.rating > input:checked + label:hover ~ label, 
 
.rating > input:checked ~ label:hover, 
 
.rating > input:checked ~ label:hover ~ label, 
 
.rating > label:hover ~ input:checked ~ label { 
 
    color: #ea0; 
 
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5); 
 
} 
 

 
.rating > label:active { 
 
    position:relative; 
 
    top:2px; 
 
    left:2px; 
 
}

<div class="rating"> 
 
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label> 
 
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label> 
 
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label> 
 
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label> 
 
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label> 
 
</div>

来源

2015-11-27 19:01:17

*加一*为CSS只回答 - 我更喜欢你的我的。 – shennan

伟大的解决方案！ – Dvir

几乎所有的上面都做了我需要的东西，但是这个 - 这个很简单。 – Croolman

如果你不介意使用jQuery，你可以使用mouseenter：

$('.head').on('mouseenter', function() { 
 
    
 
    console.log(head); 
 
    
 
    var head = this; 
 
    var off; 
 
    
 
    $('.head').each (function() { 
 
    
 
    $(this).toggleClass('active', !off); 
 
    
 
    if ($(this).get(0) == head) 
 
     off = true; 
 
    
 
    }); 
 
});

.head { 
 
    
 
    display: inline-block; 
 

 
    width: 40px; 
 
    height: 40px; 
 
    
 
    background-color: green; 
 
    
 
} 
 

 
.head.active { 
 

 
    background-color: red; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="head_1" class="head"></div> 
 
<div id="head_2" class="head"></div> 
 
<div id="head_3" class="head"></div> 
 
<div id="head_4" class="head"></div> 
 
<div id="head_5" class="head"></div>

来源

2015-11-27 19:08:27 shennan

下面的C SS唯一的解决方案可以帮助你做你想做的事情。

.container{ 
 
    width: 200px; 
 
} 
 
.middle_head{ 
 
    height:15px; 
 
\t width:15px; 
 
\t border-radius:50%; 
 
\t border: 1px solid #000; 
 
\t float: right; 
 
\t margin-right:3px; 
 
} 
 
\t 
 
.middle_head:hover,.middle_head:hover~.middle_head{ 
 
    background-color: #000; 
 
}

<div class="container"> 
 
    <div id="head_1" class="middle_head"></div> 
 
    <div id="head_2" class="middle_head"></div> 
 
    <div id="head_3" class="middle_head"></div> 
 
    <div id="head_4" class="middle_head"></div> 
 
    <div id="head_5" class="middle_head"></div> 
 
</div>

来源

2015-11-27 19:39:16 Azim

尝试使用css:hover

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    padding: 10px; 
 
    background: red; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
section div:hover, section:hover div { 
 
    cursor: wait; 
 
    background: green; 
 
} 
 

 
section div:hover ~ div { 
 
    background: red; 
 
}

<section> 
 
    <div id="head_1" class="left_head active"></div> 
 
    <div id="head_2" class="middle_head active"></div> 
 
    <div id="head_3" class="middle_head active"></div> 
 
    <div id="head_4" class="middle_head inactive"></div> 
 
    <div id="head_5" class="middle_head inactive"></div> 
 
</section>

来源

2015-11-27 20:08:44 guest271314

这很简单，但有点毛病。如果你到达任何方格的边缘，它会点亮所有的方格。 – Croolman

更改多个元素的类

回答

相关问题