Question

我使用了一个简单的jquery图像交换图标，并使用svg作为图像。

$(function(){
    $('img.rollover').hover(function(){
        var e = $(this);
        e.data('originalSrc', e.attr('src'));
        e.attr('src', e.attr('data-rollover'));
    }, function(){
        var e = $(this);
        e.attr('src', e.data('originalSrc'));
    }); /* a preloader could easily go here too */
});

它在Chrome中运行良好，但在浏览图标后的Safari中，浏览器调整它们的尺寸非常小。在IE中，他们只是从go这个词开始。

我希望有人告诉我为什么会发生这种情况，如果这是使用SVG图像的最佳方式。

<a class="icon-link" href="#" data-title="Lucid"><div id="icon-sidebar"><img class="rollover" src="images/lucid_icon.svg" data-rollover="images/lucid_icon_white.svg" /></div></a>

#icon-sidebar {width:50%; height:auto; margin-left:auto; margin-right:auto; margin-bottom:20px;}
    img.rollover {width:100%;}

以下是我正在使用的测试网站的链接。 Much More Creative

非常感谢...

Answer 1

您需要从height div。

中删除#icon-sidebar

#icon-sidebar {
    background-size: cover;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

Answer 2

您应该为＃icons-sidebar-left设置100％的宽度，否则＃icon-sidebar将从＃icons-sidebar-left继承50％的宽度。此外，您的ID＃icon-sidebar并不是唯一的，您应该将其更改为类。

Rollover SVG图像在Safari和IE中调整大小

2 个答案: