Изменить цвет div при наведении указателя мыши на javascript

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

Выше код не является за работой. Может кто-нибудь сказать мне, где я ошибаюсь.

Answer 1

Вы можете дать id="abc" к input себя или сделать что-то вроде этого:

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

Working Codepen

Answer 2

Вы подаете изменение цвета на делах. Вам нужно применить его в поле ввода.

<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 в родительский элемент не будет иметь одинакового влияния во всех браузерах, если не указано явно.

Вот что вы могли бы сделать.

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) является более эффективным подходом к решению этой проблемы, потому что JavaScript всегда может быть превращена в браузере. В этом случае ваши функции мыши перестанут работать, тогда как таблица стилей сохранится.

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

Если он достигает того же результата, приоритет CSS над JavaScript.

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 с цветами, которые вы хотите. В вашей строке 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>