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);     


        }

問題は、書かれたリンクです。この問題をどのように解決できますか? 私のコードは正しいですか？

[編集]: fiddleがどうなるかを確認するために css を追加しました。@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();
   },
});

ここではfiddleです。

于 2012-09-20T11:40:41.727 に答える