如何使用onmouseover更改顏色？

Question

我想知道如何將這2個函數轉換爲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>