Question

我在每个报告页面的底部都有一个功能区，其中包含一个用于调用window.print（）的图像。

我发现它是这样的：

<div id="dgdPrint" class="hop">
 <div id="dgdPrnImg" title="Print Report..." onclick="window.print();">
 </div>
</div>

我将它设为：

#dgdPrint 
 { position:fixed; 
   border-top:1px solid #000; 
   width:100%; 
   bottom:0; 
   right:0; 
   text-align:center; 
   height:55px; 
   margin-top:50px; 
   background-color:#88A7DB; }

#dgdPrnImg 
 { margin-top:10px;
   background-image:url('PrinterText.png'); 
   background-position:center center;
   background-repeat:no-repeat;
   height:35px; }

#dgdPrnImg:hover
 { background-image:url('PrinterText-hover.png'); }

但是整个第一个div（功能区）都会采用此效果，并且在悬停图像的任何部分时都会更改。我的代码有什么问题？

Answer 1

更改是因为您在background-image:url('PrinterText-hover.png'); }

下设置了#dgdPrnImg:hover

用css悬停更改背景图片网址

1 个答案: