javascriptでマウスを動かすとdivの色が変わります

Question

ここに私はtextfieldを持っています。onmousehoverの機能は以下の通りです。ここで

<h5 style="float:right;" id="showall" onmouseover="mouseOver()" onmouseout="mouseOut()">Show All</h5> 

は私が ショーにホバリングした後のコードではありません以上のすべての div

<div id="abc"> 
    <input type="text"> 
</div> 

はここに私のJavaScript

function mouseOver() { 
    document.getElementById("abc").style.color = "red"; 
    } 

    function mouseOut() { 
    document.getElementById("abc").style.color = "black"; 
    } 

あるホバー効果を適用する必要がいるdiv要素でありますワーキング。誰でも私が間違っている場所を教えてもらえますか？

Answer 1

あなたはinput自体にid="abc"を与えるか、またはこのような何か行うことができ、次のいずれか

<div id="abc"> 
    <input style="color: inherit" type="text"> 
</div> 

Working Codepen

Answer 2

あなたはdivの上の色の変化を適用しているが。あなたは入力ボックスにそれを適用する必要があります。

<div id="abc"> 
    <input id="xyz" type="text"> 
</div> 


    function mouseOver() { 
    document.getElementById("xyz").style.color = "red"; 
    console.log("In"); 
    } 

    function mouseOut() { 
    document.getElementById("xyz").style.color = "black"; 
    console.log("Out"); 
    } 

Answer 3

一般的に、要素のColorプロパティはブラウザによって異なります。そのため、colorプロパティを親要素に設定すると、明示的に指定されていない限り、すべてのブラウザで同じ効果が得られません。

ここにあなたができることがあります。これが直接のJavaScriptに関するご質問にお答えしていませんが

function mouseOver() { 
 
    document.getElementById("abc").style.color = "red"; 
 
} 
 

 
function mouseOut() { 
 
    document.getElementById("abc").style.color = "black"; 
 
}

#abc * { 
 
    color: currentcolor; 
 
}

<h5 id="showall" onmouseover="mouseOver()" onmouseout="mouseOut()">Show All</h5> 
 

 
<div id="abc"> 
 
    <input type="text" value="Sample Text"> 
 
</div>

Answer 4

は、私はJavaScriptを常に回すことができるので、カスケーディングスタイルシート（CSS）は、この問題を解決するためのより良い方法があることを指摘したいですブラウザでオフにします。その場合、マウスオーバー機能は機能しなくなりますが、スタイルシートはそのまま残ります。

#abc input { 
 
    background-color: red; 
 
    color: black; 
 
} 
 

 
#abc input:hover { 
 
    background-color: blue; 
 
    color: white; 
 
}

<div id="abc"> 
 
    <input type="text" value="mouseover me"> 
 
</div>

それは同じ結果を達成した場合は、JavaScriptを介してCSSに優先順位をつけます。ここで

Answer 5

  
 
    <h5 style="float:right;" id="showall" onmouseover="mouseOver()" onmouseout="mouseOut()">Show All</h5> 
 
    <div id="abc"> 
 
    To they four in love. Settling you has separate supplied bed. Concluded resembled suspected his resources curiosity joy. Led all cottage met enabled attempt through talking delight. Dare he feet my tell busy. Considered imprudence of he friendship boisterous. 
 
    </div> 
 
    <script> 
 
     function mouseOver() { 
 
     document.getElementById("abc").style.color = "red"; 
 
     } 
 
    
 
     function mouseOut() { 
 
     document.getElementById("abc").style.color = "black"; 
 
     } 
 
    </script>

作業スニペットです。これはあなたを助けるかもしれません

Answer 6

これを行うための非常に迅速な方法は、 'トグル'を使用することです。あなたはあなたのCSSであなたが望む色で2つのクラスを作成することができます。 javascriptのあなたのラインでは、あなたのdivの既存のクラスとトグルしたい色を参照してください。

/* here you use javascript to cycle between blue and gold. First you find the div by using document.getElementById('element')*/ 
 

 
function push() { 
 
    document.getElementById("abc").classList.toggle('blue'); 
 
}

#abc { 
 
    width: 200px; 
 
    height:150px; 
 
    padding: 20px; 
 
    font-family: arial; 
 
    color: black; 
 
} 
 

 
/*Your first colour to toggle*/ 
 
.gold { 
 
    background: gold; 
 
} 
 
/*Your second colour to toggle*/ 
 
.blue { 
 
    background: dodgerblue; 
 
}

<!-- Notice that a class of 'gold' has been added to give the div a color. This will be toggled with your desired colour. --> 
 

 
<div id="abc" class="gold" onmouseover="push()"> 
 
Hover over here to toggle classes. 
 
</div>