Question

我想知道如何将这两个功能改为1功能。

 function test1() {
                document.getElementById('div1').style.color = 'red';
            }
 function test2() {
                document.getElementById('div1').style.color = 'blue';
            }


    <div onmouseover="test1()" onmouseout ="test2()" id="div1">
    </div>

Answer 1

将对象和颜色传递给test方法

 function test(thisObj, color) 
 {
    thisObj.style.color = color;
 }

 <div onmouseover="test(this, 'red')" onmouseout ="test(this, 'green')" id="div1"></div>

Answer 2

你可以用css实现这个目标

https://jsfiddle.net/dango_x_daikazoku/404o04co/1/

#test1{
  color:red;
  cursor:default;
}
#test1:hover{
  color:blue;
}

Answer 3

如果您想使用JavaScript，可以这样做。

JS：

window.onload  = function(){
        var htmlDiv = document.getElementById("div1");

        htmlDiv.addEventListener('mouseover',function(){

          htmlDiv.style.color = "red";    
        })

         htmlDiv.addEventListener('mouseout',function(){  
           htmlDiv.style.color = "blue";    
        })
      }

HTML：

<style>
      #div1{
        width:100px;
        height : 100ppx;
        border :1px solid black;
      }
      #div1 { 
        color:blue; 
      }
    </style>

以下是plunker

Answer 4

我建议CSS :hover Selector

如果你想从javascript更改类，我会推荐jQuery：

jQuery addClass() Method，

jQuery removeClass() Method，

hover()

mouseover()

hasClass()

至于您使用一个函数执行此操作的请求，您可以写：

function manageHoverColor(){
   if( $("#hoverTestDiv").hasClass("mouseHovered") ){
      $( "#hoverTestDiv" ).removeClass('mouseHovered');
   }else{
      $( "#hoverTestDiv" ).addClass('mouseHovered');
   }
}


$( "#hoverTestDiv" ).mouseover(manageHoverColor);
$( "#hoverTestDiv" ).mouseout(manageHoverColor);

或者你可以这样做：

$( "#hoverTestDiv" ).mouseover(function() {
    $( "#hoverTestDiv" ).addClass('mouseHovered');
  });

$( "#hoverTestDiv" ).mouseout(function() {
     $( "#hoverTestDiv" ).removeClass('mouseHovered');
  });

.ordinaryText {
    color: #00FF00;
}

.ordinaryText.mouseHovered {
    color: #FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="hoverTestDiv" class="ordinaryText" > I am div to test jQuery mouse hover <div>

如何使用onmouseover更改颜色？

4 个答案: