Unique hover effects for tab navigation

I have designed my website with 4 tabs on the homepage: holidays, hospitality, events, and consulting. I am trying to create an effect where hovering over the tabs displays images. Here is the code I have tried:

HTML:

<div class="menu_links">
    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">  <a href="javascript:void(0);"><b>H</b>olidays</a>

    </div>
</div>
<div class="menu_links">
    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">  <a href="javascript:void(0);"><b>H</b>ospitality</a>

    </div>
</div>
<div class="menu_links">
    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">  <a href="javascript:void(0);"><b>E</b>vents</a>

    </div>
</div>
<div class="menu_links">
    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">  <a href="javascript:void(0);"><b>C</b>onsultant</a>

    </div>
</div>

CSS:

.menu_links {
    height:85px;
    width:250px;
    float:left;
    margin:5px 0px 0px 0px;
}
.menu_links a {
    float:left;
    width:150px;
    margin:5px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    text-align:center;
    color:#000000;
    text-decoration:none;
}
.menu_links:hover {
    width:250px;
    height:183px;
    top:50px;
    background: #FF9933;
    font-size:25px;
    z-index:9999;
    background-image:url('../images/holidays_bg.jpg');
}
htmlcss

Answer №1

One way to assign different images to each div using CSS is by using the following code:

.menu_links:hover {background-image:url('../images/holidays_bg.jpg');}
.menu_links + .menu_links:hover {background-image:url('../images/holidays_bg.jpg');}
.menu_links + .menu_links + .menu_links:hover {background-image:url('../images/holidays_bg.jpg');}
.menu_links + .menu_links + .menu_links + .menu_links:hover {background-image:url('../images/holidays_bg.jpg');}

Answer №2

To enhance the menu items, a new class should be added for each item with a unique name. Then, the background property can be set individually for each menu item using these classes.

Check out the code below:

<div class="menu_links first">            
                    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">                  
                        <a href="javascript:void(0);"><b>H</b>ospitality</a>
                    </div>
</div>
<div class="menu_links second">    
                    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">                  
                        <a href="javascript:void(0);"><b>E</b>vents</a>
                    </div>
</div>
 <div class="menu_links third">            
                    <div style="margin-left:40px;width:150px;height:33px;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;border:3px solid #CC9900;background-color:#FFD630;">                      
                        <a href="javascript:void(0);"><b>C</b>onsultant</a>
 </div>

For hover effects, use the following CSS:

The CSS for hover remains the same except for the hover effect.

.first:hover{ width:250px; height:183px; top:50px; background: #FF9933; font-size:25px; z-index:9999; background-image:url('../images/holidays_bg.jpg');}
 .second:hover{ width:250px; height:183px; top:50px; background: #BB7733; font-size:25px; z-index:9999; background-image:url('../images/holidays_bg.jpg');}
 .third:hover{ width:250px; height:183px; top:50px; background: #557733; font-size:25px; z-index:9999; background-image:url('../images/holidays_bg.jpg');}

Try it out on FIDDLE

Answer №3

Code for the HTML side: 

    <ul class="menu_links">
        <li class="holi"> <a href="holidays.html"><b>H</b>olidays</a>

        </li>
        <li class="hospi"> <a href="hospitaliy.html"><b>H</b>ospitality</a>

        </li>
        <li class="events"> <a href="events.html"><b>E</b>vents</a>

        </li>
        <li class="consult"> <a href="consultant.html"><b>C</b>onsultant</a>

        </li>
    </ul>

Code for the CSS side:

    ul.menu_links {
        overflow:auto;
        list-style-type:none
    }
    .menu_links li a {
        float:left;
        width:100px;
        display:block;
        background:orange none scroll repeat 0 bottom;
        font-family:Trebuchet MS;
        color:black;
        text-decoration:none;
        margin:2px 5px;
        padding:10px;
        text-align:center
    }
    .menu_links li a:hover {
        color:#444
    }
    .menu_links li.holi a:hover {
        background-image:url(http://lorempixel.com/150/50/abstract/);
    }
    .menu_links li.hospi a:hover {
        background-image:url(http://lorempixel.com/150/50/cats/);
    }
    .menu_links li.events a:hover {
        background-image:url(http://lorempixel.com/150/50/people/);
    }
    .menu_links li.consult a:hover {
        background-image:url(http://lorempixel.com/150/50/sports/);
    }

For live preview and testing, visit this link on jsfiddle : http://jsfiddle.net/gJx25/

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

Tips for incorporating inline styling into the body element

Can someone help me with adding inline style to the body element using jQuery? I want to set the background color to white (#FFFFFF). Your assistance would be highly appreciated. Thank you! ...

javascriptjqueryhtmlinline

The functionality of the button is affected when it is placed on the same line as a h1 heading

My goal is to have the page title and profile button aligned on the same line in the header of each page. However, I've encountered an issue where the button doesn't function properly when placed on the same line but works fine when separated ont ...

javascripthtmlcssreactjsweb-applications

Trouble arises with kids when trying to adjust the display to block mode

I need to set all the div elements inside the div with id "editor" to display as block. However, when I change the display property of the div with id "editor", only that specific div's display is affected, while everything else inside the div becomes ...

javascriptjquerycss

Design all buttons, except for the two specific buttons

.button , button{ border:solid black 2px !important; } Using this code, I have added a border to all buttons. But now, I need to exclude the buttons "searchsubmit" and "single_add_to_cart_button" from having a border. How can I achieve that? ...

htmlcssbuttonborder

The issue of the drop-down menu not appearing persists when using HTML and CSS

ul#menu li ,ul.sub-menu li { list-style-type: none; float:left; } ul#menu li a ,ul.sub-menu li a { display: inline-block; width: 150px; height: 40px; text-decoration: none; line-height: 40px; text-align: center; color:rgb(235, 139, 13) ...

htmlcss

css - the art of centering span text within a rounded button

CodeSandbox: https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js https://i.sstatic.net/HDtft.png I'm trying to center the dash text within a button, but I'm struggling to find a solution. html <button class="round-butto ...

cssvue.jsbootstrap-4

Issues arise when Angular animations fail to function properly due to the addition of styles through the [ng

Exploring Angular animations and seeking advice. Currently, I am utilizing ngStyle to show or hide text on hover. The goal is to smoothly animate the text as it appears on the screen. Are there alternative methods to achieve the same hover effect without r ...

htmlangular

A step-by-step guide on implementing the bootstrap paginator library to paginate PHP echoed data

I'm currently working on a project that involves displaying data from a database in a table. To make the data paginated on the client side, I decided to use the bootstrap paginator library available at: Below is the code I'm using: In my header ...

javascriptphpjqueryhtmltwitter-bootstrap

Can you explain the contrast between "#msg" and "#msg div" when used in a style tag?

<html> <head> <style> #msg { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align:center; ...

htmlcss

What's the best way to enable touch scrolling for items within a div container?

I am in the process of creating a code snippet that will allow users to scroll through items within a div, similar to a spinning wheel or slot machine. While I am aware of an existing solution for iPhone and iPod, I want to develop a simpler, more streamli ...

javascriptjqueryhtmlcss

A guide on creating and accessing a variable within a Jinja for loop

Whenever a link is clicked by the user, I would like Jinja to establish a variable known as {{ contact_clicked }} that holds the same value as {{ contact }}. I thought about using <a href="/?{% contact_clicked = contact %}">.....</a> ...

pythonhtmlpython-2.7jinja2

placing one SWF file above another

Is it feasible to layer multiple SWF files on top of one another directly? I have been experimenting with divs and different z-index values, but I am unsure about how the Flash player comes into play. Is my assumption correct that each SWF has its own indi ...

htmlcssflash

Choose a particular text node from the element that has been selected

Can anyone provide guidance on how to extract the text "Items Description" from the following HTML snippet using jQuery? <div class="items"> "Items Description" <ul> <li>1. One</li> <li>2. Two</li&g ...

javascriptjqueryhtml

Adaptable layout - featuring 2 cards side by side for smaller screens

I am currently designing a webpage that showcases a row of cards, each featuring an image and a title. At the moment, I am utilizing the Bootstrap grid system to display 4 cards per row on larger screens (col-md-2), but my goal is to modify this layout t ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Identifying browser compatibility for date input type with Angular 2 and above

Is there a reliable method to check if the browser supports <input type="date"> in Angular2+? I came across a suggestion on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date where they recommend creating the input element and chec ...

htmlangularbrowser-detection

Enhance your existing look by incorporating element.style into your designs

Is there a way to add styles onto an html element without overwriting existing css? element.style { "existing css;" } I'm trying to achieve the following result: element.style { existing css; opacity: 0; pointer-events: none; } But current ...

javascriptcss

Modifying the dimensions of an image within a :before pseudo-element

Currently, I am working on designing a mobile menu and encountered an issue with resizing the image of the hamburger menu button. Despite attempting to adjust it by following some suggestions such as this one: How to Resize Image Using CSS Pseudo-elements ...

jqueryhtmlcss

Encountering a SyntaxError: Unexpected token < in the initial position of JSON during JSON parsing within Node.js

const express = require("express"); const bodyParser = require("body-parser"); const request = require("request"); const https = require("https") ; const app = express(); // store static files (e.g css,image files) ...

htmlnode.jsjsonexpress

Iterate through a directory on the local machine and generate elements dynamically

I am looking to create a jQuery-UI tabs menu that includes 54 images on each tab. I have a total of 880 images stored in a folder, and it would be very time-consuming to manually insert an <img> tag for each one. Is there a way to dynamically cycle t ...

javascriptjqueryhtmlcssdirectory

jQuery: Function is not running as expected

I'm facing a challenge in executing a function twice, and I'm having trouble identifying the issue. Check out my JSFiddle at the following link: http://jsfiddle.net/g6PLu/3/ Javascript function truncate() { $(this).addClass('closed&apo ...

javascriptjqueryhtmlcss