Question

<div class="langs">
    <div class="flag"><h3>Country</h3>
       <img id="flag" src="../media/images/flags/en.png"/>
    </div>
   <select class="select_country" name="country" id="select_country">
   <option>United States</option>
   <option>Spain</option>
   <option >France</option>
   </select>
   </div>

Jquery的：

    $(".langs").hover(function() {
    $("#select_country").slideToggle('500').css({"display":"block"});

    });

我不会在鼠标悬停时显示选择块，然后选择国家/地区隐藏选择选项块。

Answer 1

这样的东西？

$(".langs").mouseenter(function() {
    $("#select_country").show(); // SHOW #select_country on mouse over
});

$(".langs").mouseleave(function() {
    $("#select_country").hide(); // HIDE #select_country on mouse out
});

您可能还想使用.slideDown()和.slideUp()代替.show（）和.hide（）

示例：http://jsfiddle.net/xUWK6/1/

Answer 2

//By default hide the select box
$("#select_country").hide();

//On mouseover it will show the select box
$(".langs").mouseover(function() {
    $("#select_country").show();
});

//Once you change the selection it will hide itself
$("#select_country").change(function(){
    $(this).hide();
});

jquery show hide选择选项块

2 个答案: