mouseover show div

私はこの回答をどこでも見つけることができませんでした。mouseover show div

どのようになっていたのかを知るには、隠れたdivをどのように表示させるのですか？目に見えるまで）のonmouseover設定可視性ををし、これが0ブラウザで動作隠さに設定し、視認性をONMOUSEOUT：。私は試してみました

）; は、私がリンクを作成する方法を知って、リンクを作成する方法を教えないでください

B。）、これはクロム

Cで働くれるonmouseout「」に0PXする境界線と背景の透明性とinnerHTMLの設定およびonmouseover属性を元に戻す。）これは私がwouldn「を知っていたインターネット上で最も人気のある答え、でしたとにかく試してみました。コンテナdivを可視に設定して可視性を表示し、可視化します。。yの内側のdivの

日間隠された）Chromeで1/100と0 作品

電子への不透明度を設定する）最後の：私はこれも失敗した透過GIFを作成し、それがをれるonmouseout表示したみました

jqueryの.hoverを試していませんが、正しく動作しない可能性があります。

私は他のアイデアはありません。誰か助けてくれますか？

出典

2012-01-05 Ryan Stortz

上でそれらを切り替える、これを試してみてください？ – sdleihssirhc

はクロムとウェブキットでうまく動作し、私はFirefoxを想定していますが、もちろんIEでは動作しません！ –

しかし、IE6-8のサポートを得るには、フィルターを 'alpha（opacity = XX）'に設定するだけです。 – sdleihssirhc

私は右のそれを得る場合は、DIV要素は、あなたがそれの上にある場合に表示され、マウスが終わっていないときに非表示にしたいです。それはそれをだ場合にのみ、HTMLとCSSでそれを行うことができます。

<head> 
<style> 
     #outerDiv{width:100px;height:100px;background-color:blue;} 
     #innerDiv{width:100px;height:100px;background-color:red;display:none;} 
     #outerDiv:hover #innerDiv {display:block;} 
    </style> 
</head> 
<html> 
    <div id="outerDiv"> 
     <div id="innerDiv">some text</div> 
    </div> 
</html>

外側のdivが常に表示され、それが推移だとき、内側のものが示されています。

出典

2012-01-05 21:14:52 Draganov

コンテンツが空であれば、outerdivはどのように表示されますか？それは見えません。 –

外側のdivは固定されたディメンションを持つため、表示されます。それを試してみてください：http://jsfiddle.net/wVpBu/ – Draganov

私はIEで私のためにjsfiddleで働いているので、何も表示されませんでした。 –

divのdisplay属性をonmouseoverイベントのvisible属性と一緒に 'block'に設定してみてください。

ディスプレイを「なし」に設定し、表示を「非表示」に設定して非表示にします。

もちろん、問題は隠れたdivの上にマウスを発射するでしょう。

これは私が今までにそれを使用しているすべてのブラウザで動作します。

出典

2012-01-05 20:38:41

。いったん隠されると、私は何をすべきかに困惑しています。 –

@Ryan gotcha、トリックは、すでに表示されているdivやオブジェクトを選択することです - おそらく、あなたは他のものを表示するべき場所を表示していますが、onmouseoverイベントを使用して属性を設定します私は言及した。 –

@ライアン高さと幅のある空のdivを追加することができます。あなたの元のdivの表示をonmouseoverで 'block' – rahool

http://jsfiddle.net/eb4x9/ divが非表示になっているときにmouseoverイベントがトリガーされないため、その位置とサイズを検出できます。ここでがソースである：

HTML

<div id="foo"></div>

CSS

#foo { 
    width: 300px; 
    height: 300px; 
    background-color: red; 
    visibility: hidden;  
}

$(document).mousemove(function (event) { 
    var div = $('#foo'), 
     divLeft = div.offset().left, 
     divTop = div.offset().top, 
     divWidth = div.width(), 
     divHeight = div.height(); 
    if ((event.pageX >= divLeft && event.pageX <= divLeft + divWidth) && 
     (event.pageY >= divTop && event.pageY <= divTop + divHeight)) { 
     div.css('visibility', 'visible'); 
    } else { 
     div.css('visibility', 'hidden');   
    } 
}); 
$(document).mouseleave(function (event) { 
    var div = $('#foo'); 
    div.css('visibility', 'hidden');   
});

よろしく！

出典

2012-01-05 21:28:57

私はそれがこのように見えるかもしれないと思ったが、私はdivが円形であると考えてより簡単な方法を望んでいた。私は楕円関数で点の配列を生成する必要がありますが、ああそれは十分に近いです！返信いただきありがとうございます！ –

あなたは大歓迎です:-) –

はあなたのコンテンツを持つ空と他の二つのdiv 1つを有すると不透明度方式と間違って何マウスオーバー

<html> 
<head> 

<script> 
function toggle() { 
    var your_div = document.getElementById("your_div"); 
    var empty_div = document.getElementById("empty_div"); 

    if(your_div.style.display == "block") { 
      your_div.style.display = "none"; 
      empty_div.style.display = "block"; 
    } 
    else { 
      your_div.style.display = "block"; 
      empty_div.style.display = "none"; 
    } 
} 
</script> 

<style> 
    #empty_div{width:100px; height:100px;} 
    #your_div{width:100px; height:100px; border: 1px solid #000fff;} 
</style> 
</head> 

<body> 
    <div id="your_div" onmouseover="toggle()">xyz</div> 
    <div id="empty_div" onmouseover="toggle()"></div> 
</body> 
</html>

出典

2012-01-05 21:32:48 rahool

興味深い考えがあります。正確には私が心に留めていたものではありませんが、間違いなくクールなアプローチです。 –

mouseover show div

答えて

関連する問題