Question

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

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>

这就是它的样子：

现在，当我将鼠标悬停在第三个头上时，我希望左侧的所有人都将课程从非活动状态更改为活动状态，并将所有状态从活动状态更改为非活动状态（如果它们之前处于活动状态）

Answer 1

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

$('.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;
    
  });
});

＆＃13;

.head {
  
  display: inline-block;

  width: 40px;
  height: 40px;
  
  background-color: green;
  
}

.head.active {

  background-color: red;
  
}

＆＃13;

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

＆＃13;

Answer 4

遵循CSS的解决方案可以帮助您做您想做的事。

.container{
    width: 200px;
}
.middle_head{
    height:15px;
	width:15px;
	border-radius:50%;
	border: 1px solid #000;
	float: right;
	margin-right:3px;
}
	
.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>

Answer 5

尝试使用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>

更改多个元素的类

5 个答案: