javascript - にカーソルを合わせる

Question

選択リストのオプションにカーソルを合わせると説明が表示されますが、カーソルを合わせるとコードが認識されません。

関連コード：

フォームのチャンクを選択します。

<select name="optionList" id="optionList" onclick="rankFeatures(false)" size="5"></select>
<select name="ranks" id="ranks" size="5"></select>

選択の操作（前に定義した配列）：

function rankFeatures(create) {

    var $optionList = $("#optionList");
    var $ranks = $("#ranks");

if(create == true) {
    for(i=0; i<5; i++){
        $optionList.append(features[i]);
    };
}
else {
    var index = $optionList.val();
    $('#optionList option:selected').remove();
    $ranks.append(features[index]);
};

}

これはすべて機能します。オプションにカーソルを合わせると、すべてがバラバラになります。

$(document).ready( 

function (event) {
$('select').hover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        alert('yeah!');
    };
})
})

Stack Exchangeを検索しているときにそのコードを見つけましたが、それを機能させることができません。オプションをクリックするとアラートが発生します。マウスを動かさずにEnterキーを押してアラートを閉じると、アラートは消えます。マウスで閉じると、2番目のアラートウィンドウがポップアップします。選択範囲内でマウスを動かすだけで、アラートボックスがポップアップすることがあります。オプションを直接ターゲットにしようとしましたが、ほとんど成功していません。オプションにカーソルを合わせた場合にアラートをポップアップ表示するにはどうすればよいですか？

読んでくれてありがとう！

score 12 · Accepted Answer

イベントをご利用いただけますmouseenter。

また、要素がであるかどうかを確認するために、このすべてのコードを使用する必要はありませんoption。

構文を使用して要素.on()に委任するだけです。select

$(document).ready(function(event) {
    $('select').on('mouseenter','option',function(e) {
        alert('yeah');
        // this refers to the option so you can do this.value if you need..
    });
});

http://jsfiddle.net/AjfE8/でのデモ

score 0 · Accepted Answer

必要なのは、selectではなくoption要素でホバーイベントを検出することです。

$(document).ready( 

    function (event) {
    $('#optionList option').hover(function(e) {
        console.log(e.target);
    });
})

score 0 · Accepted Answer

関数にラップインする必要はありません。このように機能させることはできませんでした。それを取り出すときは完璧に機能します。ターゲットを離れるときにホバーが実行されるため、マウスオーバーも使用されます。

$('option').mouseover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        console.log('yeah!');
    };
})

それが機能していることを確認するためにいじってください。アラートでスパムされないように、コンソールに変更しました。http://jsfiddle.net/HMDqb/

score 0 · Accepted Answer

マウスオーバーを試してください。それは私のために働いています。ホバーは、フォーカスがオプションリストから出たときにのみ機能します（mouseoutなど）。

function (event) {
$('select').mouseover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        alert('yeah!');
    };
})
})

score 0 · Accepted Answer

同じ問題がありますが、どのソリューションも機能していません。

$("select").on('mouseenter','option',function(e) {
  $("#show-me").show();
});
$("select").on('mouseleave','option',function(e) {
  $("#show-me").hide();
});

$("option").mouseover(function(e) {
  var $target = $(e.target);
  if($target.is('option')) {
    alert('yeah!');
  };
});

ここに私のjsfiddlehttps ://jsfiddle.net/ajg99wsm/

score 0 · Accepted Answer

簡単にしたい場合は、カスタマイズされたバリアントを選択することをお勧めします

ホバーイベントをキャプチャする
ホバーの色を変更する
「ドロップダウン」ビューと「すべてのアイテム」ビューで同じ動作

プラスあなたは持つことができます

サイズ変更可能なリスト
単一選択モードと複数選択モードの個別切り替え
より個別のcss-ing
オプションアイテムの複数行

添付のサンプルをご覧ください。

$(document).ready(function() {
  $('.custopt').addClass('liunsel');


  $(".custopt, .custcont").on("mouseover", function(e) {
    if ($(this).attr("id") == "crnk") {
      $("#ranks").css("display", "block")
    } else {
      $(this).addClass("lihover");
    }
  })

  $(".custopt, .custcont").on("mouseout", function(e) {
    if ($(this).attr("id") == "crnk") {
      $("#ranks").css("display", "none")
    } else {
      $(this).removeClass("lihover");
    }
  })

  $(".custopt").on("click", function(e) {
    $(".custopt").removeClass("lihover");
    if ($("#btsm").val() == "ssm") {
      //single select mode
      $(".custopt").removeClass("lisel");
      $(".custopt").addClass("liunsel");
      $(this).removeClass("liunsel");
      $(this).addClass("lisel");
    } else if ($("#btsm").val() == "msm") {
      //multiple select mode
      if ($(this).is(".lisel")) {
        $(this).addClass("liunsel");
        $(this).removeClass("lisel");
      } else {
        $(this).addClass("lisel");
        $(this).removeClass("liunsel");
      }
    }
    updCustHead();
  });

  $(".custbtn").on("click", function() {
    if ($(this).val() == "ssm") {
      $(this).val("msm");
      $(this).text("switch to single-select mode")
    } else {
      $(this).val("ssm");
      $(this).text("switch to multi-select mode")
      $(".custopt").removeClass("lisel");
      $(".custopt").addClass("liunsel");
    }
    updCustHead();
  });

  function updCustHead() {
    if ($("#btsm").val() == "ssm") {
      if ($(".lisel").length <= 0) {
        $("#hrnk").text("current selected option");
      } else {
        $("#hrnk").text($(".lisel").text());
      }
    } else {
      var numopt = +$(".lisel").length,
        allopt =  $(".custopt").length;
      $("#hrnk").text(numopt + " of " + allopt + " selected option" + (allopt > 1 || numopt === 0 ? 's' : ''));
    }
  }
});

body {
  text-align: center;
}

.lisel {
  background-color: yellow;
}

.liunsel {
  background-color: lightgray;
}

.lihover {
  background-color: coral;
}

.custopt {
  margin: .2em 0 .2em 0;
  padding: .1em .3em .1em .3em;
  text-align: left;
  font-size: .7em;
  border-radius: .4em;
}

.custlist,
.custhead {
  width: 100%;
  text-align: left;
  padding: .1em;
  border: LightSeaGreen solid .2em;
  border-radius: .4em;
  height: 4em;
  overflow-y: auto;
  resize: vertical;
  user-select: none;
}

.custlist {
  display: none;
  cursor: pointer;
}

.custhead {
  resize: none;
  height: 2.2em;
  font-size: .7em;
  padding: .1em .4em .1em .4em;
  margin-bottom: -.2em;
  width: 95%;
}

.custcont {
  width: 7em;
  padding: .5em 1em .6em .5em;
  /* border: blue solid .2em; */
  margin: 1em auto 1em auto;
}

.custbtn {
  font-size: .7em;
  width: 105%;
}

h3 {
  margin: 1em 0 .5em .3em;
  font-weight: bold;
  font-size: 1em;
}

ul {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>
  customized selectable, hoverable resizeable dropdown with multi-line, single-selection and multiple-selection support
</h3>
<div id="crnk" class="custcont">
  <div>
    <button id="btsm" class="custbtn" value="ssm">switch to multi-select mode</button>
  </div>
  <div id="hrnk" class="custhead">
    current selected option
  </div>
  <ul id="ranks" class="custlist">
    <li class="custopt">option one</li>
    <li class="custopt">option two</li>
    <li class="custopt">another third long option</li>
    <li class="custopt">another fourth long option</li>
  </ul>
</div>

javascript - にカーソルを合わせる選択リスト内

6 に答える 6

Related

Reference

javascript - にカーソルを合わせる