Question

我需要在鼠标悬停时更改背景图像，但不知道如何操作，因为它在我没写的document.write中。任何帮助表示赞赏。这是我到目前为止所拥有的。我希望B在正常情况下是什么，在鼠标悬停时是MO。

<script type="text/javascript">
function DrawRow (Link,Status) {
    B = "../Images/GreenButton.png" ;
    MO = "../Images/GreenButtonMouseOver.png" ;
    color1 = "#66FF33"; color2="#000000"; color3="#000000"; color4="#000000"; color5="#000000";


    //====================================================================================================================
    //          Check User Defined States By Rule
    //====================================================================================================================

    if ( Status4 )  { B="../Images/BlueButton.png"; MO="../Images/BlueButtonMouseOver.png"; color1="#FFFFFF"; }
    if ( Status32 ) { B="../Images/LightGreenButton.png"; B="../Images/LightGreenButtonMouseOver.png"; C1color="#000000"; }
    if ( Status2 )  { B="../Images/YellowButton.png"; MO="../Images/YellowButtonMouseOver.png"; C1color="#000000"; }
    if ( Status1 )  { B="../Images/OrangeButton.png"; MO="../Images/OrangeButtonMouseOver.png"; C1color="#000000"; }
    if ( Status8 )  { B="../Images/RedButton.png"; MO="../Images/RedButtonMouseOver.png";C1color="#FFFF00"; }
    if ( Status16 ) { B="../Images/PurpleButton.png"; MO="../Images/PurpleButtonMouseOver.png"; C1color="#000000"; }

document.write(  "<td ONCLICK=\"Jump('"+Link+"')\"onmouseover=\"this.style.cursor='hand'\" height='37' width='350' background='"+B+"' ><font color='"+color1+"'><p align='center'><b>"+T+"</b></td>"  );

Answer 1

使用以下jQuery代码可以解决您的问题。

当您确定已加载所有doit时，请调用td功能

function doit(){
    //alert(MO);
    //alert(B);
$("td[onclick^='Jump']").each(function(){
    console.log(MO);
    console.log(B);
    $(this).attr("mouseoverpic", MO);
    $(this).attr("mouseoutpic", B);

      $(this).hover(
        function(){
          $(this).attr("background", $(this).attr("mouseoverpic"));
        },
       function(){
         $(this).attr("background", $(this).attr("mouseoutpic"));
        }
     );
 });
}

PS：看看这个jsfiddle。当然我用它作为参考。

Answer 2

你还可以添加一些CSS吗？

<style>
  #somename{
    background-image:url("../Images/Green-360-Button.png");
  }
  #somename:hover{
    background-image:url("../Images/Green-360-ButtonMouseOver.png");
  }
</style>

并将id="somename"添加到<td>

Answer 3

如果您的div是这样的

 <div id="div_1"></div>

然后你可以使用风格

#div_1:hover{ 
//your style for image
}

Answer 4

你可以使用这个syntex：

onmouseover="changeImage(this.id);"
 create a function like this :

    <script language="javascript" type="text/javascript">
    function changeImage(id)
    {
       $('#'+id).css("background-image", "url(your image path)");
    }

    </script>

您必须包含jquery.js

Answer 5

最后在这里弄清楚我必须要做的很简单，只需要3天的尝试功能，使用样式表然后我就得到了这个！感谢大家的帮助，我全力支持他们的贡献！

    document.write(  "<td ONCLICK=\"Jump('"+Link+"')\" onmouseover=\"this.style.background='url("+M+")'; this.style.cursor='pointer';\" onmouseout=\"this.style.background='url("+B+")';\" onmousedown=\"this.style.background='url(../Images/Gold-360-ButtonMouseOver.png)'\"  height='25' width='350' background='"+B+"' ><p align='center'><font color='"+C1color+"'><b>"+T+"</b></td>"  );

鼠标在document.write中的背景更改

5 个答案:

您必须包含jquery.js