在没有javascript的情况下更改悬停图像使用asp.net-mvc3

问题描述

| 我想制作一个菜单，其中包含图像和标题。悬停图像或标题时，我想更改标题的颜色和图像。 这很容易。 问题是： 图像仅具有固定的高度，宽度变化，并且元素来自数据库，因此我无法对它们的宽度进行硬编码。我没有将图像的宽度和高度存储在数据库中，但是如果没有其他解决方案，我可以这样做。 我不想在悬停时加载新图像，因为如果我第一次悬停并且尚未加载替换图像，我希望它消失。我更喜欢弄乱背景职位。 此外，背景位置在较旧的IE浏览器中也无法正常工作（他们了解background-position-x，y不仅是background-position），最佳做法是什么？ css是一个静态文件，因此所有动态（使用变量）都应内联（例如div的背景url来自数据库） 图像应与标题一样可单击。基本上，链接区域应该与悬停区域相同（这意味着我希望在css中编写a：hover） 我不希望为此使用javascript（没有它应该可以） 我的代码现在有些混乱，因为我尝试了不止一种方法，并且有些东西混在一起了。

<div class=\"headericons_wrap\">
    @foreach (var headericon in Model) 
    {
    <div class=\"headericon\">
        <div class=\"headericon_image\">
            <a href=\"@Url.Content(headericon.LinkURL)\">
                <span style=\"background-image:url(@Url.Content(headericon.PictureURL));\"></span>
            </a>
        </div>
        <div>
                @headericon.Name
        </div>
    </div>
    }
</div>

和CSS

.headericons_wrap{
    float: right; max-height: 110px;
}
.headericons_wrap a img 
{
    border-style: none;

}
.headericon{
    text-align:center; 
    float:left; 
    margin:0 8px;
    max-width:96px;
    overflow: hidden;
}

.headericon_image
{
    height: 80px;
    width: auto;
}

.headericon_image span
{
    cursor: pointer;
    height: 100%;
    width: 100%;
    position: absolute;
    background: none no-repeat scroll 0 0 transparent;
}

.headericon_image a:hover span
{
    background-position: 0 100%;
}

.headericon_image a
{
    background-position: 0 0;
    display: block;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

它当前不起作用，因为它不关心图像的宽度，仅关心标题的长度，因此它剪切图像的右侧，并且标题上没有链接，但应该有链接。 带有1-2个元素的jsfiddle最好。     

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）