When mousing over a subitem of the Image menu, ensure that the Image menu

Is there a way to prevent the image menu from reverting back to its original image when hovering over its subitems? I have 5 navigation menu items, but only one has a dropdown. Whenever I hover on the subitems of About Us, the image for About Us changes back to its original state.

JFiddle:

Is there a workaround for this issue? My friend believes it's not possible, but I'm not entirely convinced.

Here is my code (for reference)

<html>
<head>

<title>CTI | About us</title>

<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>

<script>
function over(me){
me2=me;
if(me=='about'){
$('#id_About').attr('src','images/hover-aboutus.jpg');}else{$('#id_About').attr('src','images/aboutus.jpg');}

if(me=='partners') {
$('#id_Partners').attr('src','images/hover-partners.jpg');}else{$('#id_Partners').attr('src','images/partners.jpg');}

if(me=='products'){
$('#id_Products').attr('src','images/hover-products.jpg');}else{$('#id_Products').attr('src','images/products.jpg');}

if(me=='contactus'){
$('#id_Contactus').attr('src','images/hover-contactus.jpg');}else{$('#id_Contactus').attr('src','images/contactus.jpg');}
}
$( document ).ready(function() {
 me2='about'; 
$('#id_About').attr('src','images/hover-aboutus.jpg');
});

</script>  


<style type="text/css">
img {
border: 0;
}
a { text-style:none; }
body {text-align: center; margin: 0; padding: 0;}
#wrapper { width:830px; margin:0 auto; }
</style>
</head>
<body>
<input id="data2" type="hidden" value="<?php if (isset($_POST['data2'])){echo $_POST['data2']; }else{} ?>">
<div  id="wrapper">
<table width="830px" border=0 cellspacing=0 cellpadding=0 >

<tr>
     <td valign="top" align="left"><a href="aboutus1.php"><img src="images/cti-logo.png" /></a></td>

     <td valign="bottom" align="right">
<a href="welcome.php">
    <img  src="images/home.jpg" onmouseover="this.src='images/hover-home.jpg'" onmouseout="this.src='images/home.jpg'"/>
<a href="aboutus1.php" class="menu" target="content">
    <img id="id_About" onclick="over('about')" src="images/aboutus.jpg" onmouseover="this.src='images/hover-aboutus.jpg'" onmouseout="if(me2=='about'){}else{this.src='images/aboutus.jpg'}" />
</a>
<a target="content" href="partners.php">
    <img onclick="over('partners')" id="id_Partners" src="images/partners.jpg" onmouseover="this.src='images/hover-partners.jpg'" onmouseout="if(me2=='partners'){}else{this.src='images/partners.jpg'}" />
</a>
<a href="products1_1.php" target="content">
    <img onclick="over('products')" id="id_Products" src="images/products.jpg"  onmouseover="this.src='images/hover-products.jpg'" onmouseout=" if(me2=='products'){}else{this.src='images/products.jpg'}" />
</a>
<a href="contactus.php" target="content">
    <img id="id_Contactus" onclick="over('contactus')" src="images/contactus.jpg"  onmouseover="this.src='images/hover-contactus.jpg'" onmouseout=" if(me2=='contactus'){}else{this.src='images/contactus.jpg'}" class="contactus" />
</a>
</td>

</tr>
<tr>
<!--td colspan="2" class="bar"><img src="images/cti-upperbar.jpg" /></td-->
</tr>
</table>

</div>
<img src="images/cti-upperbar.jpg" />
</body>
</html>

UPDATED

I want to express my gratitude for all your contributions. :) I tried implementing your suggestions and followed the Fiddle format, but the menu image still doesn't show :( Stuck in the same spot. :(

CODE:

<html>
<head>

<title>CTI | About us</title>

<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/css">
.btn1{
    width: 85px;
    height: 58px;
    padding-top: 58px;
    float: left;
    text-align:left;
}

.btn1{
    background: url("images/home.jpg") no-repeat;
}
.btn1:hover{
    background: url("images/hover-home.jpg") no-repeat;
}

.btn2{
    width: 85px;
    height: 58px;
    padding-top: 58px;
    float: left;
    text-align:left;
}
.btn2{
    background: url("images/aboutus.jpg") no-repeat;
}
.btn2:hover{
    background: url("images/hover-aboutus.jpg") no-repeat;
}

.btn3{
    width: 85px;
    height: 58px;
    padding-top: 58px;
    float: left;
    text-align:left;
}
.btn3{
    background: url("images/partners.jpg") no-repeat;
}
.btn3:hover{
    background: url("images/hover-partners.jpg") no-repeat;
}

.btn4{
    width: 85px;
    height: 58px;
    padding-top: 58px;
    float: left;
    text-align:left;
}
.btn4{
    background: url("images/products.jpg") no-repeat;
}
.btn4:hover{
    background: url("images/hover-products.jpg") no-repeat;
}

.btn5{
    width: 85px;
    height: 58px;
    padding-top: 58px;
    float: left;
    text-align:left;
}
.btn5{
    background: url("images/contactus.jpg") no-repeat;
}
.btn5:hover {
    background: url("images/hover-contactus.jpg") no-repeat;
}
.menu ul li:hover .btn {
    background-position: -5px -120px;
}

.menu ul li{
    list-style:none;
}
.menu
{
    display: inline;
    float: left;
}
a {
    text-decoration:none;
    color:#fff;
    font-family:verdana;
    font-size:12px;
}
.menu ul li ul{
    display:none;
    background:#17c0fa;
    width:100px;
    color:#fff;
}

.menu ul li:hover ul{
    display:block;
    padding:15px;
    line-height:20px;

}
.menu ul li a:hover{
    color:#fff;
}
.menu ul li:hover .btn {
    background-position: -5px -120px;
}
</script>

<script type="text/javascript">
$(function(){
    $('li').hover(function(){

        $(this).find('ul').fadeIn();
    },function(){
        $(this).find('ul').fadeOut();
    });

});
</script>
</head>
<body>

<div  id="wrapper"-->
<table width="830px" border=0 cellspacing=0 cellpadding=0 >

<tr>
    <td valign="top" align="left"><a href="aboutus1.php"><div style="width:85px;height:58px;"></div></a></td>

    <td valign="bottom" align="right">
        <div class="menu">
            <ul>
                <li href="welcome.php" class="btn1"><img src="images/home.jpg" onmouseover="images/hover-home.jpg" onmouseout="images.home.jpg" /></li>
                <li class="btn2">
                    <ul>
                        <li><a href="aboutus1.php">About CTI</a></li>
                        <li><a href="aboutus2.php">Our Clients</a></li>
                        <li><a href="aboutus3.php">Mission / Vision</a></li>
                    </ul>
                </li>
                <li href="partners.php" class="btn3"></li>
                <li href="products.php" class="btn4"></li>
                <li href="contactus.php" class="btn5"></li>
            </ul>
        </div>
    </td>

<div class="clear"></div>
</tr>


</tr>
</table-->
</table>
</div>
<img src="images/cti-upperbar.jpg" />
</body>
</html>

I have removed the JavaScript as CSS seems like a better approach than my recent implementation.

htmlcssmenu

Answer №1

Based on your fiddle (let's stick to that approach, not JavaScript!)

Get rid of the button and simply add the class to your li. When you hover over the li, you should be able to navigate through its child elements while still staying within the li. However, once you hover over the <div> and move into the <ul>, you will no longer remain within the <div>.

Delete the position:absolute and margin-top:90px from your sub-menu. Everything should function correctly now.

<div class="menu">
  <ul>
    <li class="btn">HOVER
        <ul>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
        </ul>
    </li>
  </ul>    
</div>

.menu ul li ul{
  display:none;
  background:#78a802;
  width:200px;
  color:#fff;
  padding-top:90px;
}

Example in action: http://jsfiddle.net/y2BtT/89/

Answer №2

Perhaps there is a way to implement an action in the sub-menu using the hover function. Are you suggesting something similar to this: http://jsfiddle.net/yuhua/jJK2n/?

Answer №3

If you're facing an issue, all you have to do is include another CSS rule in order to fix it. Simply hover over the menu items to maintain the changed image.

.menu ul li:hover .btn {
    background-position: -5px -120px;
}

CHECK OUT AN EXAMPLE HERE

You can reassure your friend that they haven't lost yet because anything is achievable in Web Development; it just depends on how much time and effort you're willing to put into it :D

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing Tailwind CSS variables for customization

Using Variables in index.css : :root { --property: 1; } A Different Approach to Changing it with CSS on Hover: img{ transform: scale(var(--property));; } .another-element:has(:hover, :focus) { --property: 1.1; } There's a way to inclu ...

csstailwind-csstailwind-ui

Discover the process of extracting HTML content that's stored within a JavaScript variable

Having a HTML snippet stored in a variable, like this: var parse= 'Hello<i class="emoji emoji_smile" title=":smile:"></i><i class="emoji emoji_angry" title=":angry:"></i>World' I am looking to extract the value of the "t ...

javascriptjqueryhtml

Communicating between iframes and parent elements via events

I'm trying to trigger an event in my iframe using the following code: $('body').trigger('my_event'); However, I want to bind this event on my main page that contains the iframe like this: $('iframe').find('body&ap ...

javascriptjqueryhtmliframe

Can HTML be injected into a Knockout custom element?

I am currently developing a custom knockout element and I would like to inject some HTML into it, similar to what can be done with polymer. My goal is to achieve something along the lines of: ko.components.register('hello-world', { template ...

htmlknockout.js

Customizing React-Data-Grid styles using Material-UI in a React application

Imagine a scenario where we have a file containing themes: themes.js: import {createMuiTheme} from "@material-ui/core/styles"; export const myTheme = createMuiTheme({ palette: { text: { color: "#545F66", }, }, }); In ...

javascriptcssreactjsstylesmaterial-ui

Issue with Photoswipe pswp class Not Getting Properly Cleared Upon Closing Image

My website has a Photoswipe image gallery from . The issue I'm facing is that the CSS class does not reset or clear after closing the gallery for the second time. For example, when a user opens item 1, the images are loaded into the picture div via A ...

javascriptjquerycssajaxphotoswipe

Ways to alter the color of individual pseudo elements using a CSS loop

While working on creating a typewriter animation effect for my website using only CSS that I discovered through some online research, a question popped into my mind - is it possible to set different colors for each text in the animation? I have included t ...

htmlcssangularcss-animations

Is there a way in AngularJS to set all radio buttons to false when one is chosen as true?

When I retrieve true/false string values from the database, I am unable to alter the data. The example I provided is simply a representation of the string values true or false that I receive from the database. My goal is to have a single radio button disp ...

javascripthtmlangularjsradio-button

What causes the Object expected error in jQuery?

Looking for a way to demo horizontal collapse pane with a simple web page that includes html, css, and jquery. <html> <head> <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> <title>Sa ...

javascriptjqueryhtmlcssdebugging

Part II: Material-UI - Finding the Right Source for CSS Classes

I have recently started diving into Material UI - Grid and this question is a continuation of my previous query about defining CSS classes for Material UI components, specifically the classes.root Sunny day with a chance of rain I made some changes b ...

cssreactjsgridmaterial-ui

Ways to identify when a browser has disabled JavaScript and present a notification

Is there a way to detect if JavaScript is disabled in the browser and show an error div instead of the body? ...

javascriptjqueryhtmlnoscript

Foundation: the importance of source order (without using flex grid)

I have a 3-column grid, with content and a sidebar. On small and medium devices each takes up 12 columns. Take a look at the example here: cdpn.io/anon/pen/bqENqG. I am looking to have the sidebar appear after the articles on small and medium devices like ...

htmlcsszurb-foundation

Ways to prevent decreasing the value below zero in ReactJS?

I have created two buttons, one for increasing and another for decreasing a counter value. However, when I click on the minus button, it should not display negative values. But in my case, when I click on the minus button (initially at zero), it shows -1, ...

javascripthtmlreactjs

Arrange a row of fifteen child DIVs in the form of bullets at the bottom of their parent DIV

Currently, I am working on customizing a slider by adding bullets. My goal is to create a gradient background for the parent div containing these bullets. However, when I try to increase the height of the parent div, all the bullets align themselves at the ...

htmlcss

Adjusting color of fixed offcanvas navbar to become transparent while scrolling

After creating a navbar with a transparent background, I am now using JavaScript to attempt changing the navigation bar to a solid color once someone scrolls down. The issue is that when scrolling, the box-shadow at the bottom of the navbar changes inste ...

javascripthtmlcssbootstrap-5

Why is the video background not taking up the entire width of the div element?

I've recently integrated the jquery.videoBG plugin into my project to add a video background. Here's the HTML code: <div id="div_demo"> <div class="videoBG"> <video autoplay="" src="media/snow.mp4" style="position: abso ...

jqueryhtmlcssbackgroundhtml5-video

JavaScript functioning exclusively for specific list items within an unordered list

After implementing JavaScript on my website, I noticed that it only works when clicking on certain list items (li's) and not on others. Specifically, the functionalities for Specialties, Contact Us, and Referral Schemes are not working correctly. ...

javascriptjquerycss

What is the reasoning behind the repetitive use of @media (max-width: 767px) in the Twitter Bootstrap

Why is the media query @media (max-width: 767px) repeated in the bootstrap-responsive.css file? To find out, you can view the file by visiting ...

csstwitter-bootstrap

ReactJS incorporates multiple CSS files

I am currently working on developing a Single Page Application using ReactJS. However, I am facing an issue with styling. Currently, I have created 3 different pages (with the intention of adding more in the future), each having its own CSS file that is im ...

javascriptcssreactjsreact-routerjsx

Internet Explorer is automatically inserting extra vertical space after the first list item in a basic menu design

Does anyone else have trouble with IE? (Or is it just me?) I'm creating a list with a background. The first and last LI elements are 5px high, while the others are 16px high. However, in IE there's a strange blank space between the first and se ...

jquerycssinternet-explorerhtml-lists