Javascript 用onmouseover写入的条目_Javascript_Jquery_Onmouseover_Onmouseout

Javascript 用onmouseover写入的条目

javascript jquery

Javascript 用onmouseover写入的条目,javascript,jquery,onmouseover,onmouseout,Javascript,Jquery,Onmouseover,Onmouseout,我想在onmouseover的块中插入一个书面文本我的HTML源代码是： <li id="v4"> <div class="cl"> <div> <span class="m">Text</span> <span class="count"></span> <span class="pr"> <s

我想在onmouseover的块中插入一个书面文本

我的HTML源代码是：

    <li id="v4">
      <div class="cl">
        <div>
          <span class="m">Text</span>
      <span class="count"></span>
      <span class="pr">
         <span class="p">0%</span>
      </span>
          <!-- insert written : <span class="c1">Vote</span> -->
        </div>
      </div>
    </li>

问题是书面链接。如何解决这个问题？我的代码正确吗

[编辑]：我添加了css，让您看看会发生什么。我使用了@Konstantin D-Infragistics的代码jquery，但有一个相同的问题：当鼠标经过写入的“Text to add”时，它会闪烁。

我希望问题现在更清楚了

考虑使用jQuery让您的生活更轻松。如果添加jQuery，则可以通过以下方式实现所需的功能：

$('#v4').bind({
   'mouseover': function (event) {
       $('<span class="c4">Text to add</span>').appendTo($(this).find('div div'));
   },
   'mouseout': function (event) {
       $('.c4').remove();
   },
});

$（'#v4'）.bind({
“鼠标悬停”：函数（事件）{
$（'Text to add'）.appendTo（$（this.find（'div div'））；
},
“mouseout”：函数（事件）{
$（'.c4'）.remove（）；
},
});

在这里。

您的问题的可能解决方案在这里……希望这能对您有所帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.hide {
    display:none;
 }
.show {
    display:block;
 }   
</style>

<script type="text/javascript">
   var el;
window.onload=function() {
   el=document.getElementById('status');
   el.onmouseover=function() {
   changeText('hide','show')
 }
   el.onmouseout=function() {
   changeText('show','hide');
  }
 }
function changeText(cl1,cl2) {
   document.getElementById('span1').className=cl1;
   document.getElementById('span2').className=cl2;
}
</script>

</head>
<body>

<p id="status">
<span id="span1">[Closed]</span>
<span id="span2" class="hide"><a id="link" href="index.php">Open</a></span>
</p>

</body>
</html>


.隐藏{
显示：无；
}
.表演{
显示：块；
}   
var-el；
window.onload=function（）{
el=document.getElementById（'status'）；
el.onmouseover=函数（）{
changeText（'隐藏'，'显示'）
}
el.onmouseout=函数（）{
changeText（'show'，'hide'）；
}
}
函数更改文本（cl1、cl2）{
document.getElementById（'span1'）。className=cl1；
document.getElementById（'span2'）。className=cl2；
}

[闭门]

< /代码>请考虑添加一个工作示例（或类似），请查看jQuery。它让你的生活更轻松，你越早开始，你就越早喜欢写JS。使用jQuery时，纯JS bug要少得多。您的函数期望id作为参数，但您似乎没有向函数传递任何内容。链接（哪个？）的具体问题是什么？代码可以工作，但编写过程没有固定，但Flash我使用了您的代码，但当鼠标经过已写入的代码时，出现了相同的问题：“文本添加”它会闪烁。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.hide {
    display:none;
 }
.show {
    display:block;
 }   
</style>

<script type="text/javascript">
   var el;
window.onload=function() {
   el=document.getElementById('status');
   el.onmouseover=function() {
   changeText('hide','show')
 }
   el.onmouseout=function() {
   changeText('show','hide');
  }
 }
function changeText(cl1,cl2) {
   document.getElementById('span1').className=cl1;
   document.getElementById('span2').className=cl2;
}
</script>

</head>
<body>

<p id="status">
<span id="span1">[Closed]</span>
<span id="span2" class="hide"><a id="link" href="index.php">Open</a></span>
</p>

</body>
</html>