#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    120
    Rep Power
    1

    Keep button image in hover state while cursor is on another div


    Hey, So I have a drop down menu and the link with an image in it triggers the drop down when hovered over. When the cursor is over the button image, the image switches to a darker image. When I go off that button image to select something from the drop down menu I want the button image to stay as the darker image and then when the cursor goes away from either the button image or the div, the image would revert back to the first button image which is a lighter colour.

    Problem: The button image with cursor on button image goes into hover state which is fine, and when cursor is off the button image it reverts back to the original image which is also ok. But the button image should stay in the hover state when the cursor scrolls off the image button and onto the drop down menu. But it doesn't do that, when the cursor is over the drop down menu, the button image reverts back to the original image. So how would I go about getting this to work.

    Here is my code. If any css is need I can provide that but mainly were dealing with the html in this problem.

    Code:
    <div id="menu">
            	<ul id="mainmenu">
            		<li>
                    	<div id="trailersmenu">
            				<a href="trailers.php" target="_self"><img id="trailerbtnimg" src="images_folder/header/newheader/buttons/png/new-trailers.png" onmouseover="this.src='images_folder/header/newheader/buttons/png/new-trailershover.png'" onmouseout="this.src='images_folder/header/newheader/buttons/png/new-trailers.png'" width="107" height="55" border="0" alt="Trailers" /></a>
                		</div>
                        <ul id="subnav-trailers">
                        	<li>
                            	<div id="trailer-submenu-cont" onmouseover="trailerbtnimg.src='images_folder/header/newheader/buttons/png/new-trailershover.png'" onmouseout="trailerbtnimg.src='images_folder/header/newheader/buttons/png/new-trailers.png'">
                                	<div id="trailer-submenu-links">
    									<a href="#" class="menufont3">Tent Trailers</a><br />
                                        <a href="#" class="menufont3">Travel Trailers</a><br />
                                        <a href="#" class="menufont3">Fifth Wheels</a><br />
                                        <a href="#" class="menufont3">Park Models</a><br />
                                        <a href="#" class="menufont3">Cargo Trailers</a><br />
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                	<li>
                    	<div id="partsmenu">
                			<a href="partsandaccessories.php" target="_self"><img src="images_folder/header/newheader/buttons/png/new-parts.png" onmouseover="this.src='images_folder/header/newheader/buttons/png/new-partshover.png'" onmouseout="this.src='images_folder/header/newheader/buttons/png/new-parts.png'" width="180" height="55" border="0" alt="Parts and Accessories" /></a>
            			</div>
                    </li>
                    <li>
                		<div id="contactmenu">
                			<a href="contact.php" target="_self"><img src="images_folder/header/newheader/buttons/png/new-contact.png" onmouseover="this.src='images_folder/header/newheader/buttons/png/new-contacthover.png'" onmouseout="this.src='images_folder/header/newheader/buttons/png/new-contact.png'" width="89" height="55" border="0" alt="Contact" /></a>
            			</div>
                    </li>
                </ul>
            </div>
    Thanks for your time and help!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    91
    Rep Power
    11
    Assuming you have are using the following in your CSS:
    Code:
    #mainmenu > li a:hover { background: url('image.png');
    You could make the image switch happen on hovering on the <li> as opposed to the <a> as then your subnav-trailers is still a child of this element:
    Code:
    #mainmenu > li:hover a { background: url('image-hover.png');

IMN logo majestic logo threadwatch logo seochat tools logo