Top Hover border color is switched to default when the mouse is moved to the UL LI list

Question

I really need your help,

How can the code be modified below so as to allow the border color to remain blue while the user makes a selection in the UL LI list?

Here is a capture of the problem:

Here is a picture of the expected result:

Fiddle: https://jsfiddle.net/g825e2o2/

CSS Markup:

<style type="text/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 dt a:focus {
    /*border: 1px solid red; */
}
.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:hover, .select dt a:hover, .select dt a:focus {
    border-color: blue;
}
.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;
}
</style>

The rest of the HTML:

<script type="text/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 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();
    });

});
</script>

</head>

<body>

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

</body>

</html>

It looks like that you've already solved it. – Rahul Kashyap Jan 14 '16 at 17:21 — Rahul Kashyap, Jan 14 '16 at 17:21
May I ask why your are not using a simple – dekin88 Jan 14 '16 at 17:37 — dekin88, Jan 14 '16 at 17:37

score 3 · Accepted Answer · edited May 23 '17 at 12:07

In fact, using a little JavaScript snippet from here can do the job. You'll simply have to add the following code to your JS file (you can customize it as you wish):

$('.fruit').click(function(e){
    $(this).css("background-color", "red");
    $(this).css("color", "white");
});

Then, in your HTML file, add the "fruit" class to each link of the list you want this behavior to apply to, like this:

<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 class="fruit" data-val="apples" href="#">Apples</a></li>
            <li><a class="fruit" data-val="Bananas" href="#">Bananas</a></li>
            <li><a class="fruit" data-val="Oranges" href="#">Oranges</a></li>
        </ul>
    </dd>
</dl>

That should do the trick ;) Of course, the JavaScript snippet can be adapted to suit your CSS needs.

Inspired from the solution to that question.

Top Hover border color is switched to default when the mouse is moved to the UL LI list

1 Answers1