0

私はできるだけシンプルにしようとします。誰かがタグにマウスオーバーしたときに、このリンクの4つのボタンのように、divで簡単な可視性の切り替えを実現しようとしています:

http://www.bt.com/help/home/

今問題は、タグのマウスオーバーで表示したい、または表示したいのですが、divを非表示にすると元に戻らないので、複数のことを試しましたが、いくつかは

$("#function").on("mouseover",this, function () {
            $(this).addClass("show");
        })
        $("#function").on("mouseout",this, function () {
            $(this).removeClass("show");
            $(this).addClass("hide");
        })

もう一つは：

$("#function").hover(
                  function () {
                    $(this).addClass("hide");
                  },
                  function () {
                    $(this).removeClass("hide");
                  }

        );

そしてまた

$("#butt").on("mouseover", this, function(){
                $(this).find("div#function").show();
                //$("#function").toggleClass("visible");
            });
            $("#butt").on("mouseout", this, function(){
                $(this).find("div#function").hide();
                //$("#function").toggleClass("visible");
            });
4

6 に答える 6

2

マウスオーバーの代わりにmouseenterを使用する必要があります。これは、要素内を移動するとマウスオーバーイベントがトリガーされるためです。ここに移動し、一番下までスクロールして、mouseoverとmouseenterの違いを確認します。http://api.jquery.com/mouseenter

mouseenterイベントは、要素を入力したときにのみ発生しますが、要素内を移動することはありません。

これはあなたが望む解決策です。あなたが提供したサイトとほとんど同じです。
JavaScript

<script>
$(document).ready(function()
{
    $("#function").mouseenter(function(event)
    {
        event.stopPropagation()
        $(this).addClass("show");
    }).mouseleave(function(event)
    {
        event.stopPropagation()
        $(this).removeClass("show");
    })
});
</script>

スタイル

<style>    
.functionBlock { width:200px; height:200px; border:1px solid #CCC; padding:15px;}
.functionBlock ul { visibility: hidden}
.functionBlock.show ul { visibility: visible;}
</style>

HTML

<div id="function" class="functionBlock">
    <h5>Demo </h5>
    <ul>
        <li>APPLE</li>
        <li>SAMSUNG</li>
    </ul>
</div>

jsFiddleの例http://jsfiddle.net/TAZmt/1/

于 2013-02-26T08:36:34.080 に答える
0

これでうまくいくはずです。jsfiddleを確認してください。ここでの基本的な考え方は、mouseenterイベントのroot-divにクラス（.shown）を追加することです。このクラスは、によってdivに隠さ<ul>れたものを表示します。

.shown ul{
    display: block !important;
}

http://jsfiddle.net/28bb8/2/

編集：

あなたが探している振る舞いをよりよく反映するために、いくつかのマイナーなcssの変更を行いましたが、基本的にあなた自身のコードに対応するためにcssを変更する必要があります。これがお役に立てば幸いです。

$("document").ready(function(){
    $(".wrap").hover(
        function () {
            $(this).addClass("shown");
       },
       function () {
           $(this).removeClass("shown");
       }
    );
});
于 2013-02-26T08:35:43.787 に答える
0

ここではJavascriptは必要ありません。これはCSSだけで可能です

HTML：

<div class="panel">
    <div class="teaser"><img src="http://lorempixel.com/300/400"/></div>
    <div class="info">
        <ul>
            <li>Go here ...</li>
            <li>Or there ...</li>
        </ul>
    </div>
</div>

CSS：

.panel {
    width: 300px;
    height: 400px;
}

.info {
    display: none;
}

.panel:hover .teaser {
    display: none;
}

.panel:hover .info {
    display: block;
}

そして、プレイするためのJSFiddle。

于 2013-02-26T08:50:27.257 に答える
0 
$("#link").hover(function(){
    $("#DIV").slideToggle();
});

そしてhtmlは

<a href="#" id="link">LINK</a>
<div id="DIV" style="display:none">Your content in it</div>
于 2013-02-26T08:38:56.537 に答える
0

わかりました、セレクターのわずかな変更

$("#butt")
  .mouseover(function () {
    $("#function").show();
  })
  .mouseout(function () {
    $("#function").hide();
  });
于 2013-02-26T08:27:15.207 に答える
-1

これがあなたが求めている解決策であることを願っています。

<body>タグの下に次のコードを配置するだけです。

<script type="text/javascript">
function toggle(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
</script>

そして、ここにリンクと切り替えられたdivがあります：

<a href="javascript: return false();" onmouseover="toggle('toggleme');">
    Mouseover this link to toggle the visibility of #toggleme
</a>
<div id="toggleme">This div is "toggled"</div>
于 2013-02-26T08:32:20.637 に答える