0

我想在 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>

为了插入文本来代替注释，我编写了这段 Javascript 代码：

                    document.getElementById("v4").onmouseover = addSpan;            
        document.getElementById("v4").onmouseout =removeSpan;

        function addSpan(id)
        {           

            var li=document.getElementById(this.getAttribute("id"));            
            var divcell=li.firstChild;  

            var divelem=divcell.firstChild; 
            var span=document.createElement("span");
            span.setAttribute("class","c1");

            var testo=document.createTextNode("Vote");
            span.appendChild(testo);

            divelem.appendChild(span);                              
            span.style.display = 'block';

        }           
        function removeSpan(id)
        {               

            var li=document.getElementById(this.getAttribute("id"));            
            var divcell=li.firstChild;  

            var divelem=divcell.firstChild;//div            
            var span = divelem.lastChild;
            span.style.display='none';              
            divelem.removeChild(divelem.lastChild);     


        }

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

[编辑]：我添加了 css 让你看看fiddle会发生什么。我使用了@Konstantin D-Infragistics 的代码 jquery，但存在同样的问题：当鼠标经过所写的“要添加的文本”时，它会闪烁。我希望这个问题现在更清楚了

4

2 回答 2

1

您的问题的可能解决方案在这里...希望这可以帮助您。

<!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>
于 2012-09-20T11:45:25.297 回答
0

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

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

这是小提琴。

于 2012-09-20T11:40:41.727 回答