Hover only works once before an element is clicked on

Question

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:

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

});

Answer 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.)

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.

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

Specificity @ MDN

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

$(".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>

Answer 2

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

Answer 3

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.

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/