Question

我从网上借了一段代码用于自学目的。效果很好，请在jsfiddle demo.

查看

我想添加一些动态效果，例如当鼠标悬停在点上时，点大小会加倍。

$(document).ready(function(){
   $('.grilldots').mouseover()(function(){
       $(this).resize(function(){
          $('.grilldots').height()=52;
          })
     });
 });

以上代码无效。

CSS中原始点的大小为26。

.grilldots{
    line-height:0%;
    height:26px;
    width:260px;
    letter-spacing: -0.075em;
    color:#be2f08;
    font-size:8em;
    text-shadow: 0px 2px 2px #fd6e4d;
 }

此外，当鼠标悬停时，我想让眼睛闪烁，这可能会改变颜色。

Answer 1

这不是分配身高的正确方法 $（” grilldots。）的高度（）= 52;

它应该是： $（” grilldots。）的高度（52）;

Answer 2

您正在以错误的方式分配值，并且您以错误的方式使用mouseover函数。改变它，它会做一些事情（我认为这不是你期望的效果）

$(document).ready(function(){
  $('.grilldots').mouseover( function(){
    $(this).height(52);
  });
});

http://jsfiddle.net/PvxY2/2/

我也看到你的JS中有错误。您可以通过点击F12键并检查控制台来轻松检查：）

Answer 3

好的 - 所以将这个添加到你的CSS中。

.grilldots:hover {height: 52px!important;}

但我不认为它会给你你想要的效果，因为当你单独直接悬停点时它不起作用。这告诉我他们需要完全不同的风格。

http://jsfiddle.net/PvxY2/6/ - 在眼睛之间盘旋。

注意 - 重要的是没有必要

Answer 4

$.resize应该是一个事件监听器，用于调整某些内容的大小。这并不意味着要调整元素的大小。

您应该使用：

$('.grilldots').mouseover(function(){
   $(this).height(52);
});

不确定这是否是您正在寻找的效果。

Answer 5

好的，首先你有两个问题..第一个是因为你以错误的方式分配事件而第二个是因为你也以错误的方式分配高度。

$(seletor).on('event_name', function() {
});

和

$(selector).height(value);

现在我已经修改了你的小提琴以产生效果： The modified fiddle

虽然我更喜欢将这些内容移动到CSS并从中受益：hover selector。

鼠标悬停时调整元素大小

5 个答案: