突出显示导航栏的图像和文本
突出显示导航栏的图像和文本
提问于 2015-02-16 03:02:32
因此，我目前有一个由文本组成的导航栏，以及该文本上方的图像。当我将鼠标悬停在文本上时，图像会突出显示，反之亦然。比方说，我将鼠标悬停在“Home”图像上，它也应该突出显示图像。现在，这样做很好，但我的问题是，如果您移动鼠标太快，文本或图像将保持突出显示，这有点恼人。我想知道有没有什么我能做的，如果没有，这也不是什么大事。
我的代码，不幸的是，有点hackey：
<script>
function handleEnter(elem) {
elem = elem.target;
var location = -1;
var image_elem = null;
if ($(elem).hasClass('menutext')) {
location = $(elem).parent().parent().index() + 1
image_elem = $('.menuimgwrap:nth-child('+ location +')')
$(elem).parent().parent().addClass('hovering');
$(image_elem).addClass('hovering');
} else if ($(elem).hasClass('menuimgwrap')) {
location = $(elem).index() + 1
image_elem = $('.menuitem:nth-child('+ location +')')
$(elem).addClass('hovering');
$(image_elem).addClass('hovering');
}
}
function handleLeave(elem) {
elem = elem.target;
var location = -1;
var image_elem = null;
if ($(elem).hasClass('menutext')) {
location = $(elem).parent().parent().index() + 1
image_elem = $('.menuimgwrap:nth-child('+ location +')')
$(elem).parent().parent().removeClass('hovering');
$(image_elem).removeClass('hovering');
} else if ($(elem).hasClass('menuimgwrap')) {
location = $(elem).index() + 1
image_elem = $('.menuitem:nth-child('+ location +')')
$(elem).removeClass('hovering');
$(image_elem).removeClass('hovering');
}
}
$('.menuitem, .menuimgwrap').hover(handleEnter, handleLeave);
</script>当文本被高亮显示时，它由menutext选择器处理；当图像被突出显示时，它由menuimgwrap选择器处理。然后，它找出哪个导航栏元素被突出显示，然后确定所述元素与哪个图像或文本匹配，并突出显示那个。
如果鼠标在导航栏上移动太快，我如何解决这个问题，使其不会保持高亮显示？
谢谢
回答 1
Stack Overflow用户
发布于 2015-02-16 03:52:19
将其更改为使用CSS。基本悬停将如下所示：
<style>
.menuItem:hover {
background-color: red;
}
</style>
<a href='#' class='menuItem'>
<img src='image.png' />
Home
</a>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28529913
复制相关文章
相似问题
腾讯云开发者
