CSS / JQuery 边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10364636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS / JQuery border
提问by AnchovyLegend
The jquery code below does exactly what I want it to do on hover. However, I need it to work in the following way:
下面的 jquery 代码正是我希望它在悬停时做的事情。但是，我需要它以下列方式工作：
if a user hovers over #altimgX (for example) the black border appears. I want this border to stay until '#altimgY' is hovered; at that time, I want to remove the border from #altimgX.
如果用户将鼠标悬停在 #altimgX（例如）上，则会出现黑色边框。我希望这个边框一直保持到 '#altimgY' 被悬停；当时，我想从#altimgX 中删除边框。
I tried using 'mouseleave' but this does not solve my problem since I want the current #altimg border to stay until another #altimg element is hovered.
我尝试使用 'mouseleave' 但这并不能解决我的问题，因为我希望当前的 #altimg 边框保持不变，直到悬停另一个 #altimg 元素。
$("#altimg0, #altimg1, #altimg2, #altimg3, #altimg4, #altimg5").hover(function(){
$(this).css('border', '3px solid black');
});
HTML code snippet
HTML 代码片段
<div id="altimg0" style="height:70px; width:70px;"> SOME IMAGE </div>
<div id="altimg1" style="height:70px; width:70px;"> SOME IMAGE </div>
<div id="altimg2" style="height:70px; width:70px;"> SOME IMAGE </div>
<div id="altimg3" style="height:70px; width:70px;"> SOME IMAGE </div>
<div id="altimg4" style="height:70px; width:70px;"> SOME IMAGE </div>
<div id="altimg5" style="height:70px; width:70px;"> SOME IMAGE </div>
I appreciate any help any help in this regard.
我感谢任何帮助在这方面的任何帮助。
thank you
谢谢你
回答by Imp
var altimgs = $("#altimg0, #altimg1, #altimg2, #altimg3, #altimg4, #altimg5");
altimgs.hover(function() {
altimgs.css('border-width', '0');
$(this).css('border', '3px solid black');
});
In the hover function for each of the elements, you just have to remove the borders first, then only set it for the one you want.
在每个元素的悬停功能中，您只需先删除边框，然后只为您想要的设置边框。
Also, a fiddle: http://jsfiddle.net/EYgpj/
另外，一个小提琴：http: //jsfiddle.net/EYgpj/
回答by fhugas
Create a class in CSS
在 CSS 中创建一个类
over { border:3px solid #000 }
Then give all the images a class name like hoverimagefor example
然后给所有图像一个类名hoverimage，例如
Then add this jQuery to your code
然后将此jQuery添加到您的代码中
$(document).ready(function(){
$("hoverimage").hover(function() {
// Remove border for all images
$("over").removeClass("over");
// Add border to this image
$(this).addClass("over");
});
});
回答by Will Demaine
First of all, you should probably be selecting the elements based on a class rather than an ID:
首先，您可能应该根据类而不是 ID 来选择元素：
$(".altimg").hover(function() {
//Remove border from all altimg classes
$(".altimg").css('border','0px');
//Set the border for this element.
$(this).css('border','3px solid black');
}
回答by Venice
Create a variable to store the currently hovered element. You should probably be using a class reference to access these values though. ex $(".altImg").
创建一个变量来存储当前悬停的元素。不过，您可能应该使用类引用来访问这些值。例如 $(".altImg")。
var currentHover = '';
$("#altimg0, #altimg1, #altimg2, #altimg3, #altimg4, #altimg5").hover(function(){
$(this).css('border', '3px solid black');
if (currentHover != '')
{
$("#" + currentHover).css('border', '0px');
}
currentHover = $(this).attr('id');
});
