如何編寫一個函數來改變鼠標懸停？

我有一些按鈕的用戶界面，當我將鼠標懸停在它們上面時，我希望它們改變外觀。我有這個實現，它的工作原理，但我想知道如何可能將它作爲一個JQuery函數在一個單獨的JS文件中編寫，所以我的html更清理一些。這是我在HTML文件中做到的。如何編寫一個函數來改變鼠標懸停？

<input class= "center-block" type="image" id="open" style= "width: 75%; height: auto" src="/msViz/UserInterface/Slices/Untoggled/Open.png" onmouseover="$(this).attr('src','/msViz/UserInterface/Slices/Toggled/Open_Toggle.png')" onmouseout="$(this).attr('src','/msViz/UserInterface/Slices/Untoggled/Open.png')"/><br> 
<input class= "center-block" type="image" id="save" style= "width: 75%; height: auto" src="/msViz/UserInterface/Slices/Untoggled/Save.png" onmouseover="$(this).attr('src','/msViz/UserInterface/Slices/Toggled/Save_Toggle.png')" onmouseout="$(this).attr('src','/msViz/UserInterface/Slices/Untoggled/Save.png')"/><br> 
<input class= "center-block" type="image" id="import" style= "width: 75%; height: auto" src="/msViz/UserInterface/Slices/Untoggled/Import.png" onmouseover="$(this).attr('src','/msViz/UserInterface/Slices/Toggled/Import_Toggle.png')" onmouseout="$(this).attr('src','/msViz/UserInterface/Slices/Untoggled/Import.png')"/><br> 
<input class= "center-block" type="image" id="next" style= "width: 75%; height: auto" src="/msViz/UserInterface/Slices/Untoggled/Next.png" onmouseover="$(this).attr('src','/msViz/UserInterface/Slices/Toggled/Next_Toggle.png')" onmouseout="$(this).attr('src','/msViz/UserInterface/Slices/Untoggled/Next.png')"/><br> 
<input class= "center-block" type="image" id="edit" style= "width: 75%; height: auto" src="/msViz/UserInterface/Slices/Untoggled/Edit.png" onmouseover="$(this).attr('src','/msViz/UserInterface/Slices/Toggled/Edit_Toggle.png')" onmouseout="$(this).attr('src','/msViz/UserInterface/Slices/Untoggled/Edit.png')"/><br> 
<input class= "center-block" type="image" id="mode" style= "width: 75%; height: auto" src="/msViz/UserInterface/Slices/Untoggled/Mode.png" onmouseover="$(this).attr('src','/msViz/UserInterface/Slices/Toggled/Mode_Toggle.png')" onmouseout="$(this).attr('src','/msViz/UserInterface/Slices/Untoggled/Mode.png')"/><br> 
<input class= "center-block" type="image" id="clear" style= "width: 75%; height: auto" src="/msViz/UserInterface/Slices/Untoggled/Clear.png" onmouseover="$(this).attr('src','/msViz/UserInterface/Slices/Toggled/Clear_Toggle.png')" onmouseout="$(this).attr('src','/msViz/UserInterface/Slices/Untoggled/Clear.png')"/><br> 
<input class= "center-block" type="image" id="data" style= "width: 75%; height: auto" src="/msViz/UserInterface/Slices/Untoggled/Data.png" onmouseover="$(this).attr('src','/msViz/UserInterface/Slices/Toggled/Data_Toggle.png')" onmouseout="$(this).attr('src','/msViz/UserInterface/Slices/Untoggled/Data.png')"/><br>

來源

2015-10-26 Jason

嘗試使用cssbackground-image，:hover.addClass()，.removeClass()，setTimeout()緩存爲:hover圖像切換

var inputs = document.getElementsByTagName("input"); 
 
inputs[0].className = "hover"; 
 
setTimeout(
 
    function() { 
 
    inputs[0].className = ""; 
 
    } 
 
)

input { 
 
    width:75%; 
 
    height:auto; 
 
    background-size: 100% 100%; 
 
    background: no-repeat; 
 
    background-image: url(http://lorempixel.com/302/302/nature); 
 
} 
 
input:hover, 
 
input.hover { 
 
    background-image: url(http://lorempixel.com/302/302/cats); 
 
}

<input class="center-block" type="image" id="open" /> 
 
<br>

來源

2015-10-26 01:47:13 guest271314

你有兩個變種，以做到這一點：

1.Only與CSS：

<input class= "center-block" type="text" id="open" /> 

input#open { background: url('/msViz/UserInterface/Slices/Untoggled/Open.png') no-repeat 0 0; } 
input#open:hover { background: url('/msViz/UserInterface/Slices/Toggled/Open_Toggle.png') no-repeat 0 0; }

2.採用的jQuery（首先包括文檔中的jQuery庫）：

<input class= "center-block" type="image" id="open" style= "width: 75%; height: auto" src="/msViz/UserInterface/Slices/Untoggled/Open.png" /> 

$(document).ready(function(){ 
    $('#open').hover(function(){ 
     $(this).attr('src', '/msViz/UserInterface/Slices/Toggled/Open_Toggle.png'); 
    }, function(){ 
     $(this).attr('src', '/msViz/UserInterface/Slices/Untoggled/Open.png'); 
    }); 
});

來源

2015-10-26 01:47:54

當然，你可以在一個單獨的JavaScript文件寫這篇文章。在你的javascript文件中加入以下內容：

$("#open").mouseover(function() { 
    $(this).attr("src", "..../Open_Toggle.png"); 
}); 
$("#open").mouseout(function() { 
    $(this).attr("src", "..../Open.png"); 
});

但是由於你有很多按鈕，這比我想要的要冗長得多。相反，我會一類分配給每個input元素，像這樣：

<input class="hoverable center-block" ... />

，然後寫只是一個像這樣的塊（我還沒有驗證這個代碼，但你的想法）：

$(".hoverable").mouseover(function() { 
    var existingSrc = $(this).attr("src"); 
    $(this).attr("src", existingSrc.substring(0, existingSrc.length - 4) + "-Toggle.png"; 
}); 
$(".hoverable").mouseout(function() { 
    var existingSrc = $(this).attr("src"); 
    $(this).attr("src", existingSrc.replace("-Toggle", "")); 
});

來源

2015-10-26 01:53:31 Venkat

如何編寫一個函數來改變鼠標懸停？

回答

相關問題