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

虽然这并没有直接回答你关于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 2

您可以将id="abc"提供给input本身，也可以执行以下操作：

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

Working Codepen

Answer 3

您正在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 4

通常，元素的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 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

一种非常快速的方法是使用＆＃39;切换＆＃39;。然后，您可以使用所需的颜色在css中创建两个类。在您的javascript行中，引用您希望与div中现有类切换的颜色。

＆＃13;

/* 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');
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

6 个答案: