鼠标悬停在 javascript 时更改 div 颜色

Question

这里我有一个 textfield，我已经给出了 onmousehover 函数，如下所示。

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

这是一个div，我必须在悬停到全部显示后应用悬停效果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 应用颜色更改。您需要在输入框上应用它。

<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

通常，元素的颜色属性因浏览器而异。因此，将颜色属性设置为父元素不会在所有浏览器中产生相同的影响，除非明确指定。

这是您可以做的事情。

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

一个非常快速的方法是使用 'toggle'。然后，您可以在 css 中创建两个具有所需颜色的 classes。在您的 javascript 行中，参考您希望使用 div 中现有的 class 切换的颜色。

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

鼠标悬停在 javascript 时更改 div 颜色

Change div color when mousehover in javascript

html

javascript

mousehover