鼠标悬停在 document.write 中的背景变化答案

【问题标题】：on mouse over background change in document.write鼠标悬停在 document.write 中的背景变化
【发布时间】：2013-08-03 11:11:51
【问题描述】：

我需要在鼠标悬停时更改背景图像，但不知道该怎么做，因为它在我没有写的 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>"  );

【问题讨论】：

你为什么不使用 CSS 并尝试 tr:hover
@Ushani 你能告诉我如何用我拥有的东西来改变它吗？
how to change the div background image in mouse over 的可能重复项
@NickyDEMaeyer 这不是重复的，我需要知道如何使用我拥有的特定 document.write 更改鼠标悬停。因为我不知道怎么做。
可能重复，让版主决定。您要求有人为您完成所有工作，这不是本网站的目的。

标签： javascript html

【解决方案1】：

使用下面的jQuery 代码可能会解决您的问题。

当您确定所有 tds 都已加载时，调用 doit 函数

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。当然我是拿来做参考的。

【讨论】：

我如何把它放在 document.write 中？
@chrisw.iec 为什么要在您无法控制的情况下使用document.write 编写它？确保 tds 已加载后，只需将其包含在您的 html 代码中即可。
它必须用 document.write 编写。 doc.write 是 javascript 函数的一部分。此代码从一个软件的数据库中提取数据，该软件告诉您电镀槽的结果和测试时间。 onclick 跳转带您到下一页查看结果图像 B 和 MO 是坦克本身的状态测试后期测试超过规格 10% 之类的东西。没有办法拔出我不相信的doc.write。写这篇文章的人已经死了，我只能更改并更新它。所以在上个月，我尽我所知学习了 html javascript 和 css。
如果您认为有更好的方法来编写 doc.write，请告诉我如何！
我得到了这个document.write( "<td ONCLICK=\"Jump('"+Link+"')\" onmouseover=\"this.className='MouseOver'\" onmouseout=\"this.className='BackGround'\" onmousedown=\"this.className='down'\" height='37' width='350' background='"+M+"' ><font color='"+C1color+"'><p align='center'><b>"+T+"</b></td>" );，我有这个用于css .MouseOver{ background:url('../Images/Gray-360-ButtonMouseOver.png'); color:#000000 font-color:#000000; } .BackGround1{ background:+MO+; } .down{ background:url('../Images/Gold-360-ButtonMouseOver.png'); color:#000000 font-color:#000000; }

【解决方案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>

【讨论】：

ya 大多数页面在 html 中使用 css，但所有 javascript 都是函数并在文档中写入。那么如何将其合并到文档中，将背景 '"=B"' 替换为背景 '"MO"'
它在文档中不起作用。写我想它可能但它没有。

【解决方案3】：

如果你的div是这样的

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

那么你可以使用样式

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

【讨论】：

没有 div 也不知道怎么添加到 document.write 我没有经验。
document.write("" );
document.write 是 javascript 函数的一部分。所以我的css样式部分在函数之后。这有关系吗？所以我把它放在什么后面？ ` document.write("
"+T+"
" );`
可以这样写 document.write("
我会在几分钟内做演示。

你必须包含 jquery.js