我正在构建一个网站,当用户将鼠标悬停在某个产品上时,我想给该图像一个左上角,右上角,左下角和右下角的边框。由于CSS属性border-top-left-image
在几年前已被弃用,因此唯一的其他解决方案是使用JS。目前我的想法是,我将使用带有图标类的span,然后在悬停时附加四个跨度,然后从DOM中删除它们,这是最好的解决方案,还是有一些更简单的地方,我不附加四个跨度和每次产品悬停时移除它们,这是我当前的代码告诉我你的想法,任何建议都会很棒,提前感谢!
CSS
.icon {
background: url("../images/theme/icons.png");
overflow: hidden;
width: 1.6em;
height: 1.6em;
position: absolute;
}
.top-left {
top: 0;
left: 0;
background-position: -11.2em 24em;
}
.top-right {
top: 0;
right: 0;
background-position: -1.6em 24em;
}
.bottom-left {
bottom: 0;
left: 0;
background-position: -8em 24em;
}
.bottom-right {
bottom: 0;
right: 0;
background-position: -4.8em 24em;
}
HTML
<div class="layout-product">
<a href="http://www.mysite.com/product/lorem-ipsum-1">
<div class="product-image">
<img src="http://www.mysite.com/images/thumbnail/lorem-ipsum-1.jpg" alt="">
</div>
</a>
</div>
的jQuery
$('.layout-product').hover(function() {
$(this).find('.product-image').append('<span class="icon top-left"></span>'
+ '<span class="icon top-right"></span>'
+ '<span class="icon bottom-left"></span>'
+ '<span class="icon bottom-right"></span>'
);
}, function() {
$('.icon').remove();
});
答案 0 :(得分:1)
您应该在创建/删除节点之前尝试重新使用节点。 JavaScript与DOM的关系越少,动画和用户体验就会越快。由于您没有检索有关悬停事件的任何动态信息,因此您可以将.icon
元素放入初始html中,并使用display: none
属性。无论是在CSS中还是在悬停时使用JS show / hide。脚本还会阻止页面加载,因此它们会影响性能,显然取决于脚本的长度。
例如
(添加到现有的CSS)
/* Default */
.layout-product .icon {
display: none;
}
.layout-product:hover .icon {
display: block; /* or inline-block or whatever you like that isn't none */
}
<强> HTML 强>
<div class="layout-product">
<a href="http://www.mysite.com/product/lorem-ipsum-1">
<div class="product-image">
<img src="http://www.mysite.com/images/thumbnail/lorem-ipsum-1.jpg" alt="">
<span class="icon top-left"></span>
<span class="icon top-right"></span>
<span class="icon bottom-left"></span>
<span class="icon bottom-right"></span>
</div>
</a>
</div>
如果您希望动画更灵活,可以使用我提供的CSS的Javascript 而不是。
<强>的JavaScript 强>
// I have used a toggle which means it applies for both .mouseenter and .mouseleave
// which the .hover function alias. If you pass one function rather than two it will
// Use that function for both events. Customize as you like.
$('.layout-product').hover(function(e) {
$(this).find('.icon').fadeToggle();
});
如果您可以避免在html中使用空元素并使用您可以使用的任何css属性,background
border-image
如您所提到的那样,那么这是不言而喻的,那么这将是优先的,较少的DOM元素是更好的性能和可维护性,并且应尽可能避免语义元素(表示与内容的分离)。
浏览器兼容性显然是一个因素:
border-image
。 caniuse.com background
的{{3}}