12

当悬停在选择列表中的选项上时，我试图显示描述，但是，在悬停时我无法识别代码。

相关代码：

选择表格块：

<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 搜索时发现了该代码，但我没有运气让它工作。当我单击一个选项时会出现警报。如果我不移动鼠标并按回车键关闭警报，它就会消失。如果我用鼠标关闭，则会弹出第二个警报窗口。只是在选择周围移动鼠标偶尔会弹出一个警告框。我曾尝试直接针对这些选项，但收效甚微。如果我将鼠标悬停在某个选项上，如何弹出警报？

谢谢阅读！

4

6 回答 6

12

您可以使用该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/

于 2012-11-07T03:45:06.573 回答
0

尝试鼠标悬停。它为我工作。仅当焦点来自选项列表（如鼠标悬停）时，悬停也有效。

function (event) {
$('select').mouseover(function(e) {
    var $target = $(e.target);
    if($target.is('option')) {
        alert('yeah!');
    };
})
})
于 2012-11-07T03:28:58.907 回答
0

你不需要在函数中说唱，我永远无法让它以这种方式工作。取出时效果很好。也使用鼠标悬停，因为在离开目标时会运行悬停。

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

小提琴看看它的工作。将其更改为控制台，这样您就不会收到垃圾邮件。http://jsfiddle.net/HMDqb/

于 2012-11-07T03:34:20.310 回答
0

您想要的是检测选项元素上的悬停事件，而不是选择：

$(document).ready( 

    function (event) {
    $('#optionList option').hover(function(e) {
        console.log(e.target);
    });
})​
于 2012-11-07T03:33:57.140 回答
0

如果您想放松，我建议您选择定制的变体

  • 捕获悬停事件
  • 更改悬停颜色
  • “下拉”和“所有项目”视图的相同行为

另外你可以拥有

  • 可调整大小的列表
  • 在单选和多选模式之间单独切换
  • 更个性化的 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>

于 2018-11-22T15:50:34.003 回答
0

我有同样的问题，但没有一个解决方案有效。

$("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!');
  };
});

这是我的jsfiddle https://jsfiddle.net/ajg99wsm/

于 2017-02-18T15:03:05.900 回答