使用JavaScript更改HTML类

Question

我有一个使用两个类

的html类

$(document).ready(function() {
  $(".container").hover(function() {
    $('.green').addClass('display-on');
  });
  $(".container").mouseleave(function() {
    $('.black').removeClass('display-on');
  });
});

.black {
  background-color: black;
}

.green {
  background-color: green;
}

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

  <div class="black">
    <h1>hello
      <h1>
  </div>

  <div class="green">
    <h1>hello
      <h1>
  </div>

</div>

当鼠标悬停到类container h1时，我需要background-color black黑色。

当鼠标悬停在类container h1

时，

和background-color green为绿色

上面的代码不起作用。

Answer 1

您不需要javascript来执行此操作。你可以自己在几行CSS中完成它：

.black:hover {
  background-color: black;
}
.green:hover {
  background-color: green;
}

编辑：由于这似乎是使用jQuery，我得到的问题有点不对，你可以这样做：

jsfiddle.net/L4t2kqhp

<div class="container"> 

 <div class="black">
   <h1>hello<h1>
  </div>

  <div class="green">
   <h1>hello<h1>
  </div>

</div>

$(document).ready(function() {   
    $(".black").hover(function() {
        $('.container').css("background-color", "black");
    }, function(){
    $('.container').css("background-color", "white");
});
    $(".green").hover(function() {
        $('.container').css("background-color", "green");
    }, function(){
    $('.container').css("background-color", "white");
});
});

Answer 2

你可以用它作为你的css代替：

.black:hover{
   background-color: black;
      }

.green:hover{
       background-color: green;
      }

Answer 3

根据您所说的内容，应该像为每个.container添加悬停功能一样简单，这会更改父div的类以反映悬停的$(document).ready(function() { $(".green").hover(function() { $(this).closest('.container').toggleClass("green"); }); $(".black").hover(function() { $(this).closest('.container').toggleClass("black"); }); });。

.black {
  background-color: black;
}

.green {
  background-color: green;
}

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

  <div class="black">
    <h1>hello</h1>
  </div>

  <div class="green">
    <h1>hello</h1>
  </div>

</div>

[arrayYSorted, arrayYIndex] = sort(matrixA(:,1));
arrayX = matrixB(:,1);
arrayXSorted = arrayX(arrayYIndex);