-2

我在使用 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');
});

请在这件事上给予我帮助...

4

6 回答 6

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

try this...
于 2013-09-13T06:29:25.420 回答
1

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

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

http://jsfiddle.net/W4eYQ/

于 2013-09-13T06:29:52.413 回答
0

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

于 2013-09-13T06:31:09.747 回答
0

像这样

脚本

$(function(){

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

});
于 2013-09-13T06:31:12.553 回答
0

当仅使用 CSS 即可实现时，我不明白您为什么要使用 jquery：

使用:hoverCSS 选择器：-

.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');
    });
});
于 2013-09-13T06:43:37.110 回答
-2

试试这个 css 这会很好

.item:hover {
      outline: 3px solid blue;
}
于 2013-09-13T06:32:20.613 回答