在鼠标悬停时更改 Div 大纲答案

【问题标题】：Change Div Outline onmouse over在鼠标悬停时更改 Div 大纲
【发布时间】：2013-09-13 06:24:23
【问题描述】：

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

请帮帮我...

【问题讨论】：

This works。有什么问题？
您是否在 dom 就绪处理程序中添加了代码？
.item元素是否动态创建

标签： javascript jquery css html hover

【解决方案1】：

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

try this...

【讨论】：

只提供outline: 3px solid blue; 就足够了。为什么 :hover in caps?
它不区分大小写，大写或小写都不是问题。我刚刚编辑了他的代码，是的，只是“大纲：3px 纯蓝色；”够了。。

【解决方案2】：

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

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

http://jsfiddle.net/W4eYQ/

【讨论】：

感谢您的回复，您一直很友善

【解决方案3】：

我不明白你为什么使用 jquery，而这可以通过 CSS 来实现：

使用:hover css 选择器：-

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

如果您只想要使用 jQuery 的解决方案，那么您可能会错过以下事情要做：（正如上面 cmets 中的 johny 所提到的）

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

感谢您的回复！你一直很善良

【解决方案5】：

这样

脚本

$(function(){

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

});

【讨论】：

【解决方案6】：

试试这个 css 就可以了

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

【讨论】：

我用这个只设置了大纲属性...非常感谢
谁对我投了反对票，我认为他没有尝试或不了解 css