Question

我希望制作水平对齐的社交媒体图标，并在鼠标悬停在图标上时发光。我可以使用span标签垂直对齐图标，但图标都会立即发光。

如果可能的话，我想用尽可能少的JS做到这一点，只需要一个可以与所有按钮一起使用的函数。我是否需要使用JQuery的this方法？

Answer 1

保持代码不变，只需将float: left添加到div.fadehover即可如果你想在之后添加文本，则需要清除：两者

<p class="clear">more text</p>

.clear {clear: both;}

你的代码也很好，只需稍加改动，将鼠标悬停在.fadeout上，然后捕捉$（this）.find（“img.color”）而不是

 $(document).ready(function(){
            //how to use "this" method so my social all icon not glow but only the selected one
          $(".fadehover").hover(
          function() {
            $(this).find("img.color").stop().animate({"opacity": "1"}, "slow");
          },
          function() {
            $(this).find("img.color").stop().animate({"opacity": "0"}, "slow");
          });
        });

但我必须建议：CSS3，css：悬停，背景颜色和png透明胶片，选项有很多可以做得更好。

http://jsfiddle.net/q4h8D/1/

Answer 2

对于第二部分，请执行：

$('img.bw,img.color').hover(
    function() {
        $(this).stop().animate({"opacity": "1"}, "slow");
    },
    function() {
        $(this).stop().animate({"opacity": "0"}, "slow");
    });
});

Answer 3

要获取图标，请尝试float:left;或display:inline-block;至div.fadehover，其中一个可能取决于页面的其余部分

关于发光，请看看CSS3过渡

你可以删除所有的jQuery并修改你的CSS，如下所示：（600ms与jQuery animate'slow'的速度相同）

img.color{
    position:absolute;
    left:0;
    top:0;
    opacity:0;
    transition: opacity 600ms;
    -webkit-transition: opacity 600ms;
}

.fadehover:hover img.color{
    opacity: 1;
}

如果您感兴趣，还有其他评论，因为您的图片是png并且具有透明度，您可以只使用一张图片（而不是两张）创建相同的悬停效果，然后淡入background-color进出，尽管你会需要裁剪图像，因为它们周围都有透明的“边框”

示例小提琴here

另一种方法是CSS图像精灵（即在一个图像上设置所有图像，然后使用背景图像剪裁来显示您想要的部分），尽管您可能无法发光效果，虽然你可以用box-shadow

做点什么

有关CSS Images Sprites的更多信息，请尝试使用goggling

Answer 4

.fadehover{display:block;
width:48px;
height:48px;
float:left;
margin:0px 2px 0px 0px;}

将它们置于中心位置，你必须将所有fadehover放在另一个div中，并使用示例类.center并使用

.center{
width:250px;
margin:0px auto 0px auto;}

JS

$('img.bw,img.color').hover(
    function() {
        $(this).stop().animate({"opacity": "1"}, "slow");
    },
    function() {
        $(this).stop().animate({"opacity": "0"}, "slow");
    });
});

相对绝对水平位置＆amp; ＆＃34;这＆＃34;关于jQuery的方法

4 个答案: