Question

我想制作一个带有图像和标题的菜单。在悬停图像或标题时，我想更改标题的颜色和图像。

这很容易。

问题是：

图像只有固定的高度，宽度不同，元素来自数据库，所以我不能硬编码它们的宽度。我不会将图像的宽度和高度存储在数据库中，但如果没有其他解决方案，我可以这样做。

我不想在悬停时加载新图像，因为如果第一次悬停并且尚未加载替换图像，我不希望它消失。我更喜欢搞乱背景位置。在旧的IE浏览器中，背景位置也很奇怪（他们理解background-position-x，y不仅仅是背景位置），处理这个问题的最佳做法是什么？

css是一个静态文件，因此所有动态（使用变量）应该是内联的（就像div的后台url来自数据库）

图像应该像标题一样可点击。基本上链接区域应该与悬停区域相同（这意味着我更愿意写一个：悬停在css中）

我宁愿不使用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将是最好的。

Answer 1

您的图片网址是否可变？如果没有，你可以简单地做：用一个不同的网址悬停在headericon上。

我见过（并且使用过）的另一个想法是创建一个图像中的两个或三个（在您的情况下为两个），其中图像堆叠在一起。然后，使用CSS：hover，改变图像的x，y坐标，有效地“上移”图像，以显示另一个图像。可以动态创建这个“组合”图像，而不会在PHP或asp中出现太多麻烦。

Answer 2

您可以动态创建CSS类以与每个标头一起使用（常规版本和带有悬停选择器的标题）。这可以在样式标记内的文件的head标记部分中完成，或者您可以使用此信息动态生成CSS文件（我知道您不想这样做，但它可能会使事情变得更容易）。

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

2 个答案: