Here就是一个例子。我正在寻找光标所在的行和列,以显示:hover属性。有没有办法做到这一点,而不需要JavaScript?如果没有,jQuery中有一个简单的方法可以为任何数量的行/列进行此操作吗?CSS:悬停 - 如何让较低的DIVs:悬停以及?
回答
不与css一样,只有一个元素被悬停(来自重叠的非嵌套元素)。
jQuery的可以帮助,但它不是小事..
粗的实现是
- 添加
.row
和.col
类的元素(适当) - 绑定一个自定义事件处理程序检查鼠标坐标是否在他们的框内,并设置/取消悬停状态
- 当鼠标移动到内部时t他的行和cols的容器(你应该将它们包装在一个),创建事件(我们绑定到行列数自定义类型的),并启动它在全球
HTML
<div id="container">
<div id="row1" class="row"></div>
<div id="row2" class="row"></div>
<div id="col1" class="col"></div>
<div id="col2" class="col"></div>
</div>
的JavaScript
$('.col, .row').bind('intersect',function(e){
var $me = $(this);
var pos = $me.offset();
var size = {w:$me.width(), h:$me.height()};
if (e.pageX > pos.left && e.pageY > pos.top && e.pageX < pos.left + size.w && e.pageY < pos.top + size.h)
{
$me.addClass('hover');
}
else if ($me.is('.hover'))
{
$me.removeClass('hover');
}
});
$('#container').mousemove(function(e){
var evt = jQuery.Event('intersect');
evt.pageX = e.pageX;
evt.pageY = e.pageY;
$.event.trigger(evt);
});
如果你使用一个表,你可以通常只是做这样的事情:
tr:hover > td {
background-color: yellow;
}
...但如果你有不嵌套元素,只有其中一人将被视为:hover
版。您必须使用JavaScript将悬停状态传播到位于其下的其他元素。
?? ??他的例子中没有表.. – 2011-04-07 21:16:21
谢谢加比,很好的地方。 – 2011-04-07 21:21:00
可以是任何东西,不只是一张桌子。 – trgraglia 2011-04-07 21:22:33
我会使用jQuery的兄弟姐妹:
$("#row1").siblings("#row2").css(attr, value);
或者你可以使用.class或类似的东西。
- 1. 如何让我的CSS:悬停工作?
- 2. CSS悬停菜单:让悬停的菜单项,以保持悬停状态的css
- 3. 悬停在悬停的CSS菜单
- 4. 如何让图像悬停在CSS?
- 5. 想让悬停
- 6. 让动画悬停像过渡悬停
- 7. CSS - 悬停
- 8. CSS悬停
- 9. 悬停与CSS
- 10. CSS:悬停
- 11. Impliment父类的悬停CSS悬停到其子标签悬停css
- 12. 如何悬停使用CSS?
- 13. 如何更改css:悬停?
- 14. CSS悬停效果如何?
- 15. CSS - 如何解决悬停?
- 16. CSS文字悬停及过渡效果
- 17. CSS:悬停 - 如何使:悬停在文字上影响图像?
- 18. CSS悬停在INPUT.homeButton
- 19. 帮助:悬停CSS
- 20. CSS悬停效果
- 21. 阻塞CSS悬停
- 22. 删除悬停CSS
- 23. CSS:悬停过渡
- 24. Div与CSS悬停
- 25. CSS悬停图片
- 26. 悬停效果(CSS)
- 27. CSS悬停褪色
- 28. CSS悬停效果
- 29. CSS特殊悬停
- 30. CSS转换:悬停
这太棒了,谢谢! – Justin808 2011-04-07 22:53:46