Question

在我们正在开展的项目中，我们让用户为他的菜单选择图片以及每个菜单的悬停状态图片。现在，菜单包含x个div个标签，根据用户选择我们设置div的样式，以便将图像应用为背景，并mouseover和onmouseout我们更改样式属性。

然而，这会导致图像闪烁，这是不理想的。我想要的是像精灵悬停在css上的结果，但在这种情况下我不知道如何实现或接近这样的事情。如果我没有弄错的话，一次又一次地请求图像因此闪烁？

当前源代码：

<div class="help-context-box" style="background-image: url(http://domain.com/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&amp;groupId=10180); background-color: rgb(255, 255, 255); background-position: 0% 0%; background-repeat: no-repeat no-repeat;"
onmouseover="this.style.background='#fff url(/c/document_library/get_file?uuid=bd77adc5-54c7-42c8-b39d-f07f1d611ac0&amp;groupId=10180) no-repeat left top'" onmouseout="this.style.background='#fff url(/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&amp;groupId=10180) no-repeat left top'"></div>

Answer 1

为了实现这一点，我认为你必须使用来自php或其他图形库的GD才能将这两个图像附加到精灵中然后使用

<div class="help-context-box" 
style="background-image: url(...); background-color: rgb(255, 255, 255); background-position: 0% 0%; background-repeat: no-repeat no-repeat;"
onmouseover="this.style.backgroundPosition='50% 0'" onmouseout="this.style.backgroundPosition='50% 0'"></div>

或者不使用内联或javascript：

<强> HTML

<div class="help-context-box"></div>

<强> CSS

.help-context-box{
  background:url(path/to/usersprit.png) no-repeat;
  background-color: rgb(255, 255, 255);
  background-position:0% 0%;
}

.help-context-box:hover{
  background-position:-100% 0%;
}

fiddle

用户选择图像和悬停状态图像的菜单，最终闪烁

1 个答案: