CODEWITHSUNDEEP
htmlcss
Hwang
Hwang

Reputation: 502

Keeping hover mode till mouse over another button/link

You know when you roll over a menu, it will show a submenu. I wanted to keep the submenu visible even tough I roll out from the button, and only change the submenu when I mouse over other links or buttons.

Does this include javascript? or it can be done just in CSS?

Upvotes: 1

Views: 953

Answers (3)

spielersun
spielersun

Reputation: 172

with Jquery/

class of menu buttons : .btnMenu{} class of other buttons & links : .btnOthers{}

$('.btnMenu').hover(
   function() {
      $('ul.subMenu').css('display','none');};
   function() {
      $(this).children('ul.subMenu').css('display','block');};
);

$('.btnOthers').hover(
   function() {
      $('ul.subMenu').css('display','none');}
);

it should work, I have no other solution for now/

may be its possible just using css, but I cant find one/

btw, possible with css3 & html5//

Upvotes: 0

Barrie Reader
Barrie Reader

Reputation: 10713

This is how I figured I would do it (using jQuery): Edit: for the record, this cannot be done in HTML & CSS alone.

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .link {
            display: block;
            width: 100px;
            height: 50px;
            border: 1px solid #000000;
            float: left;
            padding-right: 5px;
        }
    </style>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.link').mouseover(function() {
                $('.link').stop().animate({ //Ensure all ".link" tags are set to black border
                        border: '1px solid #000000'
                    });
                $(this).stop().animate({ //Change current ".link" to a red border
                    border: '5px solid #ff0000'
                }, 150, function() {
                    //Do nothing when the animation has finished
                });
            });
        });
    </script>
</head>
<body>
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 1</a>
</body>
</html>

Hope it helps!

Upvotes: 1

Luke
Luke

Reputation: 19

from the sounds of it you best bet would be to set up the javascript so that when that item is hovered over then the expanded action occurs, and only have that item dissapear upon a hover over on a competing item, if you give the code you are using currently it will make it easier to give you an some example code to build off.

Upvotes: 0

Related Questions