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

如何解决在没有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最好。

解决方法

您的图片网址是否可变？如果没有，您可以在标题图标上用不同的URL进行：hover。我见过（并使用过）另一种想法是在两三个或三个（在您的情况下为两个）中创建一个图像，其中图像彼此堆叠。然后，使用CSS：hover，更改图像的x，y坐标，有效地“上移”或“下移”图像以显示其他图像。这个“组合”图像可以在运行中创建，而不会在PHP或ASP中造成太多麻烦。 ,您可以动态创建CSS类，以使其与每个标头（常规版本和一个带有悬停选择器的标头）一起使用。这可以在样式标签内文件的head标签部分中完成，也可以使用此信息动态生成CSS文件（我知道您不想这样做，但这可能会使事情变得更容易）。