jQuery PNG 透明 MouseHover答案

【问题标题】：jQuery PNG transparent MouseHoverjQuery PNG 透明 MouseHover
【发布时间】：2012-03-12 18:51:50
【问题描述】：

我有以下问题。我有一个像这样的团队页面：http://www.social-markets.de/social-commerce-team.html 小圆圈团队图片，并希望通过 jQuery 添加一个 PNG 透明 MouseHover PNG 图像，底部的小圆圈带有粉红色圆圈。有人有想法吗？

【问题讨论】：

为什么不能像顶部的大圆圈那样做呢？有没有什么特别的原因，请说明，因为它可能会给你一个更好的答案
另一个建议你也可以只制作一个圆形图像的副本......（因为它一次只能在一个图像上可见。然后你可以根据图像设置该图像的偏移量悬停在上面。

标签： jquery png mousehover

【解决方案1】：

通过 CSS (display:none) 隐藏附加信息并在悬停时切换。某样东西：

$('.elementWithExtra').hover(function(){
$(this).children('.extra').toggle();
}, function(){
$(this).children('.extra').toggle();
});

请参阅：http://api.jquery.com/hover/ 和 http://api.jquery.com/toggle/

【讨论】：

【解决方案2】：

$(".imgDiv").mouseover(function(){
  $(this).children(".hiddenImgDiv").show();  
}).mouseout(function(){
  $(this).children(".hiddenImgDiv").hide();  
});

【讨论】：

您应该使用类而不是 ID，因为会有多个元素。还有mouseover 和mouseout没有大写的Os
如果我们通过其父元素引用，我认为拥有相同 id 的孩子不会有任何问题
拥有多个具有相同 ID 的元素将始终是个问题。 “ID 类型属性的特殊之处在于，没有两个这样的属性可以具有相同的值；无论文档语言如何，ID 属性都可以用来唯一标识其元素。” -> w3.org/TR/CSS2/selector.html#id-selectors
感谢您的链接...更正了...！但我仍然不明白它会如何阻碍工作
它应该可以工作，但它会生成无效的 HTML。因此，我会选择课程。