Question

我有一些带有一些按钮的用户界面，当我将鼠标悬停在它们上面时，我希望它们能够改变外观。我有这个实现，它的工作原理，但我想知道我怎么可能在一个单独的JS文件中将其作为一个JQuery函数编写，所以我的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>

Answer 1

尝试使用for (int row = 0; row < x; row++) { for (int col = 0; col < y; col++) { String words = inputFile.nextLine(); for (int i=0; i < words.length(); i++) array[x][y] = words.charAt(i); } } css，background-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);
}

Answer 2

你有两种变体：

1.仅限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');
    });
});

Answer 3

当然你可以在一个单独的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", ""));
});

如何写一个函数来改变鼠标悬停？

3 个答案: