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

Retrieve data in JSON format from an external source file

I've been attempting to retrieve JSON content from an external file named list.json, but unfortunately all of my efforts have been unsuccessful. I've created a prototype of my code on Jsfiddle (http://jsfiddle.net/ctmvcyy1/). I believe that the ...

javascriptphpjqueryhtmljson

Creating MySQL inserts from various dynamic HTML tables generated using PHP

Currently, I am faced with a challenge while working on a PHP file that produces multiple dynamic HTML tables through the use of an included PHP library. To provide a glimpse, here is a snippet of the HTML output (with just two tables and reduced rows) ava ...

phpmysqlhtmlinclude

Master the art of string slicing in JavaScript with these simple steps

I am attempting to utilize the slice function to remove the first three characters of a string within a JSON object. $(document).ready(function() { $.ajaxSetup({ cache: false }); setInterval(function() { $.getJSON("IOCounter.html", functio ...

javascripthtmljsonajax

Vue unable to load material icons

The icons npm package "material-icons" version "^0.3.1" has been successfully installed. "material-icons": "^0.3.1" The icons have been imported as shown below. <style lang="sass"> $material-icons-font-path: '~material-icons/iconfont/'; ...

cssvue.jssassvuejs2google-material-icons

Trouble with applying position absolute to pseudo element in Firefox version 12 and higher

I seem to be running into an issue with the positioning of a pseudo element in Firefox version 12 or higher (possibly even earlier versions). Despite having position:relative on the anchor tag, the element appears to be relative to the entire page. Any ide ...

htmlcssfirefox

perfecting the styling of a tab management system

For reference, please check out the following link: http://jsfiddle.net/XEbKy/3/ In my design, I have organized two layers of tabs. The top layer consists of two tabs while the bottom layer has three tabs. My goal is to have all these tabs neatly enclosed ...

css

The method item.appendChild does not exist as a function

Despite being a common error, I've researched extensively and still can't figure out why it's happening. It seems like it should be an easy fix, but I'm struggling to find the solution on my own. var item = document.createElement("div" ...

javascripthtmlcssdom

Creating dynamic templates for table rows in AngularJS directives

Is it possible to dynamically load an AngularJS Directive templateUrl while working within a table? In my scenario, I have the following HTML structure where I am repeating a tr element with a fw-rule directive: <tbody> <tr ng-repeat="rule in ...

javascripthtmlangularjsangularjs-directive

In MUI v5 React, the scroll bar vanishes from view when the drawer is open

Currently, I am working on developing a responsive drawer in React using mui v5. In the set-up, the minimum width of the drawer is defined as 600px when it expands to full width. However, an issue arises when the screen exceeds 600px - at this point, the d ...

javascriptcssreactjsmaterial-uiscrollbar

Display information based on the radio button chosen

I've set up a radio button with options for "no" and "yes", but neither is selected by default. Here's what I'm trying to achieve: If someone selects "no", nothing should happen. However, if they select "yes", then a message saying "hello w ...

javascriptjqueryhtmlcss

It is impossible to add a new element between two existing elements that share the same parent

I'm attempting to place an <hr> tag between the first and second .field-container. Because they have the same parent, I thought using element1.parentNode.insertBefore(element2, ...) would be the solution. However, it is not working as expected a ...

javascripthtml

Reposition div when clicked

I have encountered a challenge where I am unable to perform a small task. My goal is to have the position of "div1" change upon clicking on "div2", taking into account that "div2" is nested inside "div1". Additionally, when clicking on "div2" again, "div1" ...

javascriptjqueryhtmlcss

Uploading a file to a server using HTML and PHP: a step-by-step guide

Looking to utilize PHP as a proxy for uploading files to a server. Any advice on how I can send the uploaded files along with a Basic Authorization header? ...

phphtml

External CSS file for Demandware platform

My boss was supposed to train me this year on demandaware knowledge, but ended up quitting, leaving me in the dark. I am scheduled to attend workshops later this year, but for now I am relying on Google and stackoverflow for guidance. Currently, I am wor ...

cssstylesdemandware

I am encountering an issue while developing a JavaScript filtering system

Hey everyone, I need help with coding a filter in JavaScript and I'm running into an error (Uncaught TypeError: todos.forEach is not a function) that I can't figure out. Can someone assist me in resolving this issue? const todoFilter = docume ...

javascripthtmlcssfiltering

The process of transmitting messages back and forth between a popup script and a content script

I am in the process of developing a Chrome extension that involves sending data requests from a popup script to a content script (via a background script), analyzing the request on the content script, and then sending back a response (again through the bac ...

javascriptjqueryhtmlgoogle-chrome-extension

Styling group headers within an unordered list using pure CSS - possible?

Hey there, I'm looking to spruce up my UL by adding group headers. Here's a sneak peek at the structure I have in mind (keep in mind this is generated dynamically from a database): <ul> <li class='group group-1'> < ...

htmlcsscss-selectors

Adjust image size while maintaining aspect ratio

Currently, I am implementing a resize function for an image by using the following code snippet: $('.image_resize').each(function(){ var ww = $(window).width() - 80 - 400; var wh = $(window).height() - 60; var iar = $(this).attr(&apo ...

javascriptjqueryhtml

Run Javascript code if a specific CSS class is present on an element

Whenever a user enters an incorrect value into a textbox on my page, an error message is displayed within a div with the class 'validation-errors'. I'm looking for a solution to trigger a javascript function (which adds a CSS property to a ...

javascriptjqueryhtmlcssasp.net-mvc

Is there a way to generate PDF files from rrdcgi output?

I have developed an rrdcgi script to showcase system performance data through graphs. I am now seeking a way to allow users to generate PDFs on the spot, containing the current page's images and information along with header and footer details. Additi ...

htmlperlrrdtool