悬停仅在单击元素之前工作一次

时间：2016-01-14 18:32:11

标签： javascript jquery html css css3

我需要你的帮助，

似乎悬停只能工作一次，方案如下，用户将鼠标悬停在元素上，然后单击它以进行选择。选择完成后，将更改边框颜色并选择新值。如果用户从同一个框中选择另一个值，则“蓝色”悬停不再存在，为什么会这样？

这是问题的前后图片： enter image description here

HTML： 

<dl id="reqtype" class="select">Fruits
    <dt><a href="#"><span data-val=""></span></a></dt>
    <dd>
        <ul>
            <li><a data-val="" href="#">&nbsp;</a></li>
            <span class="header-list">- List -</span>
            <li><a data-val="apples" href="#">Apples</a></li>
            <li><a data-val="Bananas" href="#">Bananas</a></li>
            <li><a data-val="Oranges" href="#">Oranges</a></li>
        </ul>
    </dd>
</dl>

<br><br>

<dl id="action" class="select">Status
    <dt><a href="#"><span data-val=""></span></a></dt>
    <dd>
        <ul>
            <li><a data-val="" href="#">&nbsp;</a></li>
            <li><a data-val="ACTIVE" href="#">ACTIVE</a></li>
            <li><a data-val="ON HOLD" href="#">ON HOLD</a></li>
            <li><a data-val="CLOSED" href="#">CLOSED</a></li>
        </ul>
    </dd>
</dl>

CSS： 

* {
    font-family: Segoe UI;
    font-size: 9pt;
}
.select dd, .select dt, .select ul {
    margin: 0px;
    padding: 0px;
}
.select dd {
    position: relative;
}
.select a, .select a:visited {
    color: #000;
    text-decoration: none;
    outline: none;
}
.select dt a:hover, .select dd ul:hover,  {
    border-color: blue;
}
.select dd ul li a:hover {
    background-color: rgb(112,146,190);
    color: #FFF;
}

.select dt a {
    background: url(arrow.png) no-repeat scroll right center;
    display: block;
    padding-right: 20px;
    border: 1px solid rgb(170,170,170);
    width: 180px;
}
.select dt a span {
    cursor: pointer;
    display: block;
    padding: 4px;
    height: 15px;
}
.select dd ul {
    background:#fff none repeat scroll 0 0;
    border-bottom:1px solid rgb(170,170,170);
    border-left:1px solid rgb(170,170,170);
    border-right:1px solid rgb(170,170,170);
    border-top:0;
    display:none;
    left:0px;
    padding:5px 0px;
    position:absolute;
    top:-1px;
    width:auto;
    min-width:200px;
    list-style:none;
}
.select dd ul li a {
    padding-left:10px;
    padding-top:3px;
    padding-bottom: 3px;
    display:block;
}
.selected{
    background: rgb(195,195,195);
}
.header-list {
    padding-left: 3px;
    font-weight: bold;
    font-style: italic;
}

JavaScript的： 

$(document).ready(function() {

    $(".select dt a").click(function() {
        var select = $(this).closest('.select');
        select.find('ul').toggle();
        //$(this).css("background-color", "rgb(255,255,196)");

        select.find("dt a, dd ul").css('border-color', 'red')

        //alert(select.find("dt a, dd ul").hasClass('target'))


    });

    $(".select dd ul li a").click(function(e) {
        var text = $(this).html();
        var select = $(this).closest('.select');


        if (e.ctrlKey) {

            $(this).addClass('selected');

            select.find('dt span').html("(" + select.find('a.selected').length + ")")



        }
        else {
            var text = $(this).html();
            select.find("dd a").removeClass('selected');
            $(this).addClass('selected');

            select.find("dt span").html(text);

            select.find("dt a").css("background-color", "");

            select.find("dd ul").hide();
        }

    });

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("select"))
            $(".select dd ul").hide();
    });

});

3 个答案:

答案 0 :(得分：4)

jQuery＆＃39; css() setter＆＃34;修改元素的样式属性＆＃34;。由于内联样式的更高特异性，该属性将覆盖以前的CSS定义。 （您可以使用!important，但我建议不要这样做。）

  

添加到元素的内联样式（例如，style =＆＃34; font-weight：bold＆＃34;）总是覆盖CSS中的任何样式，因此可以被认为具有最高的特异性。

     

使用！important是不好的做法，应该避免使用，因为它会破坏样式表中的自然级联，从而使调试变得更加困难。

     

Specificity @ MDN

我取消了＆＃34; border＆＃34;风格属性：

$(".select dd ul, .select dt a").css('border-color', '');

下面的工作示例：

＆＃13;
＆＃13; 
$(document).ready(function() {

  $(".select dt a").click(function(e) {
    e.stopPropagation();
    var select = $(this).closest('.select');
    select.find('ul').toggle();
    select.find("dt a, dd ul").css('border-color', 'red')
  });

  $(".select dd ul li a").click(function(e) {
    var text = $(this).html();
    var select = $(this).closest('.select');
    if (e.ctrlKey) {
      $(this).addClass('selected');
      select.find('dt span').html("(" + select.find('a.selected').length + ")");
    } else {
      var text = $(this).html();
      select.find("dd a").removeClass('selected');
      $(this).addClass('selected');
      select.find("dt span").html(text);
      select.find("dt a").css("background-color", "");
      select.find("dd ul").hide();
    }
  });

  $(document).bind('click', function() {
    $(".select dd ul").hide();
    $(".select dd ul, .select dt a").css('border-color', '');
  });

});
＆＃13; 
* {
  font-family: Segoe UI;
  font-size: 9pt;
}
.select dd,
.select dt,
.select ul {
  margin: 0px;
  padding: 0px;
}
.select dd {
  position: relative;
}
.select a,
.select a:visited {
  color: #000;
  text-decoration: none;
  outline: none;
}
.select dt a:hover,
.select dd ul:hover {
  border-color: blue;
}
.select dd ul li a:hover {
  background-color: rgb(112, 146, 190);
  color: #FFF;
}
.select dt a {
  background: url(arrow.png) no-repeat scroll right center;
  display: block;
  padding-right: 20px;
  border: 1px solid rgb(170, 170, 170);
  width: 180px;
}
.select dt a span {
  cursor: pointer;
  display: block;
  padding: 4px;
  height: 15px;
}
.select dd ul {
  background: #fff none repeat scroll 0 0;
  border-bottom: 1px solid rgb(170, 170, 170);
  border-left: 1px solid rgb(170, 170, 170);
  border-right: 1px solid rgb(170, 170, 170);
  border-top: 0;
  display: none;
  left: 0px;
  padding: 5px 0px;
  position: absolute;
  top: -1px;
  width: auto;
  min-width: 200px;
  list-style: none;
}
.select dd ul li a {
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  display: block;
}
.selected {
  background: rgb(195, 195, 195);
}
.header-list {
  padding-left: 3px;
  font-weight: bold;
  font-style: italic;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<dl id="reqtype" class="select">Fruits
  <dt><a href="#"><span data-val=""></span></a></dt>
  <dd>
    <ul>
      <li><a data-val="" href="#">&nbsp;</a></li>
      <li><a data-val="apples" href="#">Apples</a></li>
      <li><a data-val="Bananas" href="#">Bananas</a></li>
      <li><a data-val="Oranges" href="#">Oranges</a></li>
    </ul>
  </dd>
</dl>

<dl id="action" class="select">Status
  <dt><a href="#"><span data-val=""></span></a></dt>
  <dd>
    <ul>
      <li><a data-val="" href="#">&nbsp;</a></li>
      <li><a data-val="ACTIVE" href="#">ACTIVE</a></li>
      <li><a data-val="ON HOLD" href="#">ON HOLD</a></li>
      <li><a data-val="CLOSED" href="#">CLOSED</a></li>
    </ul>
  </dd>
</dl>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

它之所以不起作用的原因是因为您选择了一个项目，.select dt a中的样式优先并覆盖dt:hover。因此，您需要将!important属性附加到border-color。

替换

.select dt a:hover, .select dd ul:hover,  {
    border-color: blue;
}

用

.select dt a:hover, .select dd ul:hover, dt:hover {
    border-color: blue !important;
}

工作示例：http://jsfiddle.net/DinoMyte/X6jzs/24/

答案 2 :(得分：0)

为什么要使用所有代码并且根本没有使用select？

<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

悬停应该可以正常使用

相关问题
最新问题