Question

我在使用css和javascript时遇到问题...我有几个<div>与class="item"。我想要做的是改变在悬停时触发动作的轮廓。

我有这个CSS：

.item {
   width: 118px;
   height: 98px;
   float: left;
   margin: 2px;
   background-color: #FFF;
   outline: 3px solid transparent;
}

和我从谷歌发现的这个javascript

$('.item').hover( function() {
   $(this).css('outline', '3px solid blue');
},
function() {
   $(this).css('outline', '3px solid transparent');
});

请帮帮我...

Answer 1

.item:HOVER {
   width: 118px;
   height: 98px;
   float: left;
   margin: 2px;
   background-color: #FFF;
   outline: 3px solid blue;
}

try this...

Answer 2

如上所述，这应该可以正常工作。另外，您可以在没有任何jQuery或Javascript的情况下执行此操作，只需使用简单的css：

.item:hover
{
    outline: 3px solid blue;
}

http://jsfiddle.net/W4eYQ/

Answer 3

我建议您使用jquery的selectable $(".item-list'").selectable();而不是重新发明轮子。

Answer 4

喜欢这个

<强>脚本

$(function(){

  $('.item').hover(
    function(){
       $(this).addClass('hovered');
    },
    function(){
       $(this).removeClass('hovered');
    }
  );

});

Answer 5

我不明白你为什么使用jquery只能用CSS实现：

使用:hover css选择器： -

.item:hover{
     outline-color: blue;
}

如果您只想使用jQuery解决方案，那么您可能会遗漏以下事项：（如johny在上述评论中所述）

将代码包装在$(function(){/*code here*/})

使用.on()附加活动。（如果元素是动态添加的）

$(function(){
    $('.item').on('hover',  function() {
        $(this).css('outline', '3px solid blue');
    },
    function() {
        $(this).css('outline', '3px solid transparent');
    });
});

Answer 6

试试这个css，这样可以正常使用

.item:hover {
      outline: 3px solid blue;
}

改变Div Outline onmouseover

6 个答案: