原型点击，鼠标悬停和鼠标悬停不能一起使用吗? [英] Prototype click, mouseover and mouseout can't work together?

问题描述

我正在尝试做一个非常简单的按钮，该按钮会根据鼠标悬停，鼠标移开和 单击，我正在原型中进行此操作，很奇怪的是，如果我使用mouseover和mouseout， 我单击按钮后，按钮不会变成白色，似乎是因为鼠标移开了，这是我的代码

$("izzy").observe('mouseover', function() {
     $('izzy').setStyle({ color: '#FFFFFF' });
});

$("izzy").observe('mouseout', function() {
     $('izzy').setStyle({ color: '#666666' });
});

$("izzy").observe('click', function() {
     $('izzy').setStyle({ color: '#FFFFFF' });
});

我该如何解决?谢谢.

解决方案

除非鼠标悬停时有其他情况发生，为什么不使用CSS?

#izzy:hover { color: '#FFFFFF'; }

但是，对于您到底要发生什么，我有些困惑.假定您希望按钮为白色(如果已单击)或鼠标悬停在其上方.我希望click事件处理程序添加一个clicked类，如下所示:

$("izzy").observe('click', function() {
    $('izzy').addClass('selected');
});

css也是如此

#izzy { color: '#666666'; }
#izzy:hover, #izzy.selected { color: '#FFFFFF'; }

这样做的好处是可以将状态(单击/不单击和鼠标悬停/不悬停)与样式(黑色或灰色)分开.现在，他们混在一起，造成了混乱，并容易受到错误的攻击.<​​/p>

I'm trying to do a very simple button that changes color based on mouseover, mouseout and click, I'm doing this in prototype and the weird thing is if I used mouseover and mouseout, after I clicked on the button, the button wouldn't change to white, seems like it is because of the mouseout, here's my code

$("izzy").observe('mouseover', function() {
     $('izzy').setStyle({ color: '#FFFFFF' });
});

$("izzy").observe('mouseout', function() {
     $('izzy').setStyle({ color: '#666666' });
});

$("izzy").observe('click', function() {
     $('izzy').setStyle({ color: '#FFFFFF' });
});

how can I fix it? Thanks.

解决方案

Unless there's something else happening in mouse over and out, why not use css?

#izzy:hover { color: '#FFFFFF'; }

However, I'm a little confused as to what exactly you want to happen. Assuming you want the button white if it has been clicked or if the mouse is over it. I'd have the click event handler add a clicked class, like so:

$("izzy").observe('click', function() {
    $('izzy').addClass('selected');
});

And the css as so

#izzy { color: '#666666'; }
#izzy:hover, #izzy.selected { color: '#FFFFFF'; }

This has the advantage of separating the state - clicked/not-click and mouse over/not over - from the style - black or gray. Right now they're all mixed in together, creating confusion and opening yourself to bugs.

这篇关于原型点击，鼠标悬停和鼠标悬停不能一起使用吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！