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

I need your help,

我需要你的帮助，

It appears that the hover will only work once, the scenario is as follows, the user hovers over the element, then clicks on it to make a selection. Once a selection is made, the border colors are changed and a new value is selected. If the user goes to select another value from the very same box, the 'blue' hover is no longer present why is that?

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

Here is a before and after pic of the problem:

这是问题的前后图片：

HTML:

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:

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:

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 个解决方案

#1

jQuery's css() setter "modifies the element's style property". That property will override your previous CSS definition due to the higher specificity of inline styles. (You might be able to use !important, but I'd advise against it.)

jQuery的css（）setter“修改了元素的样式属性”。由于内联样式的更高特异性，该属性将覆盖以前的CSS定义。 （你可能会使用！重要，但我建议反对它。）

Inline style added to an element (e.g., style="font-weight:bold") always overwrites any styles in the CSS and thus can be thought of as having the highest specificity.

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

Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.

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

Specificity @ MDN

特异性@ MDN

I had success by removing the "border" style property:

我通过删除“border”样式属性获得了成功：

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

Working example below:

下面的工作示例：

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

});

* {
  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;
}

<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>

#2

The reason why it doesn't work is because one you select an item, the styles from .select dt a takes precedence and overrides dt:hover. So you need to attach !important attribute to border-color.

它不起作用的原因是因为你选择一个项目，来自.select dt a的样式优先并覆盖dt：hover。所以你需要将！important属性附加到border-color。

Replace

更换

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

With

同

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

Working example : http://jsfiddle.net/DinoMyte/X6jzs/24/

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

#3

Why are using all that code and simply not used an 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>

The hover should works fine with

悬停应该可以正常使用