DIVのクラスはFIRSTです。私は、ホバー上のクラスSECONDを呼びたいと思う。これどうやってするの？CSSのホバー上で別のクラスを呼び出す方法は？
私は次のコードを使用しています：あなただけの疑似セレクタを使用してホバーの追加スタイルを追加し、追加のクラスを使用する必要はありません
.first{
background:#F00;
}
.second{
background: #0F0;
}<div class="first"> This is DIV</div>を：
を合わせます<style>
.first{
background:#F00;
}
.first:hover{
background: #0F0;
}
</style>
私は非常に親切ですが、私はあなたが純粋なjavascriptで尋ねていることを行う方法の例を追加しました：
<style>
.first{
background:#F00;
}
.second{
background: #0F0;
}
</style>
<div class="first" onmouseover="change()" onmouseout="changeBack()"> This is DIV</div>
<script>
function change() {
var d = document.getElementsByClassName("first");
d[0].className += " second";
}
function changeBack() {
var d = document.getElementsByClassName("first");
d[0].className = "first";
}
</script>
上記の方法は、あなたが探しているものを行うには不適切です。 以下の内容を確認してください。
HTMLコード：
<div class="first"> This is DIV</div>
CSSコード：
.first{
background:#F00;
}
.first:hover{
background: #0F0;
cursor: pointer;
}
説明
ホバー効果を作成するには、:hoverを宣言する必要があります。したがって、新しいクラスを作成する代わりに、hoverを動作させるクラスに:hoverという疑似クラスを追加する必要があります。これはあなたが探しているホバー効果を行います。
は、この情報がお役に立てば幸いです。
ホバーこれは、あなたがJavaScriptでそれを行うだろうかある結果
を参照するには最初のボックス。
document.getElementById（ 'idOfElement'）が要素参照を取得しています。
イベントを追加しています。あなたの場合、onmouseoverとonmouseleaveの2つのイベントが必要です。
let first = document.getElementById('first'),
sec = document.getElementById('second');
first.onmouseover =() => {
sec.style.background = 'black';
}
first.onmouseleave =() => {
sec.style.background = 'red';
}#first, #second {
height: 100px;
width: 100px;
background: red;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s linear;
}<div id="first">first</div>
<div id="second">second</div>また、CSSでこれを行うことができます。ただし、これは限られています。親要素とそれ以前の兄弟要素への参照を取得することはできません。それは私が知っているものです。 （私が間違っていれば私を修正してください）。
#first, #second {
height: 100px;
width: 100px;
background: red;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s linear;
}
#first:hover ~ #second {
background: black;
}<div id="first">first</div>
<div id="second">second</div>それがお役に立てば幸いです。歓声
限られた数のケースで別のものが動かされたときに、あるクラスの要素をスタイルすることができます。主な制約：ホバリングされた要素は、の前にスタイルのものの前に配置する必要があります。 +と~adjacent and general sibling combinators
.first{
background:#F00;
}
.second{
background-color: #0F0;
}
.first:hover ~ .second {
background-color: tomato;
}
.first:hover ~ .hello .second {
background-color: violet;
}
.hello {
background-color: beige;
}
.hello {
padding: 1rem;
}<div class="first"> This is DIV</div>
<div> Some div</div>
<div class="second"> I've class .second</div>
<div class="hello">
<div class="second"> Child of a (following) sibling of .first</div>
</div>
約
より上のコードには 'second'要素が存在しませんか？ – kukkuz
CSSで「クラスを呼び出す」ことはできません* ...これはプログラミング言語ではありません。それはルールセットです。 –