Tips for creating a hovering bar underneath your links

I'm currently working on designing a stylish navigation bar using CSS, and I have a specific feature in mind. When a user hovers over a link in the navigation bar, I want a colored bar to appear under a different link. Essentially, I need the background color of one box to change when hovering over another.

Here's the HTML code:

<div id="navbar">
    <div class="links">
        <table>
        <tr>
            <td class="link1"></td><a href="Index.html">Calvin and Hobbes</a></td>
            <td class="link2"><a href="Index.html">Garfield</a></td>
        </tr>
        <tr class="hoverbar">
            <td class="link1hover"></td>
            <td class="link2hover"></td>
        </tr>
        </table>
    </div>
</div>

And here is the accompanying CSS styling:

.links {
    float:right;
    font-size:200%;
}

#navbar table{
    margin-top:30px;
    border-spacing:40px 0px;
}

#navbar td {
line-height:30px;
}

.hoverbar {
    height:5px;
}

.link1:hover + .link1hover {
    background-color:#FF5C00;
}

.link2:hover + .link2hover {
    background-color:#FF5C00;
}

a:link {color:black; background-color:transparent; text-decoration:none}
a:visited {color:black; background-color:transparent; text-decoration:none}
a:hover {color:#FF5C00; background-color:transparent; text-decoration:none}
a:active {color:#FF5C00; background-color:transparent; text-decoration:none}
htmlcss

Answer №1

It appears that the current selectors are not functioning as expected in your setup.

.link1:hover + .link1hover {
  background-color:#FF5C00;
}

This is because .link1hover is not directly adjacent to .link1 due to having different parent elements. In order to achieve the desired effect within your structure, you may need to utilize JavaScript or reorganize your code like this:

.links {
  float: right;
  font-size: 200%;
}

.link1hover, .link2hover {
  margin: 10px;
  height: 10px;
  width: 300px;
  background: yellow;
}

.link1:hover ~ .link1hover {
  background-color: #FF5C00;
}

.link2:hover ~ .link2hover {
  background-color: #FF5C00;
}

a:link {
  color: black;
  background-color: transparent;
  text-decoration: none
}

a:visited {
  color: black;
  background-color: transparent;
  text-decoration: none
}

a:hover {
  color: #FF5C00;
  background-color: transparent;
  text-decoration: none
}

a:active {
  color: #FF5C00;
  background-color: transparent;
  text-decoration: none
}
<div id="navbar">
  <div class="links">
    <div class="link1"><a href="Index.html">Calvin and Hobbes</a></div>
    <div class="link2"><a href="Index.html">Garfield</a></div>
    <div class="link1hover"></div>
    <div class="link2hover"></div>
  </div>
</div>

Answer №2

Give this code a try! It can help you create a navigation bar for your website. Simply copy, paste, and test it out.

<html>
<head>
<title>Welcome !</title>

<style type="text/css">

body{
    margin:0;
  padding: :0;

}
.navigation{
  width: 100%;
  background-color: black;
  height: 50px;
  padding-top: 1px;
  text-align: center;
}

ul li{
  list-style-type: none;
  display: inline;
  width: auto;
  height: 100%;
  margin-left: 50px;
  background-color: orange;
  padding: 10px;
  margin-bottom: 2px;
  border-radius: 5px;

}

ul li:hover{
  background-color: white;

}

ul li a{
  text-decoration: none;
  color: white;
  font-family: helvetica;
  font-size: 20px;


}

ul li a:hover{
  color:orange;
}

</style>


 <body>

  <div class="navigation">
    <ul>
      <li><a href="">Calvin and Hobbes</a></li>
       <li><a href="">Garfield</a></li>
    </ul>
  </div>


 </body>
</html>

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

Python (Selenium) - Guide on extracting and storing data from multiple pages into a single CSV file

I am facing a challenge with scraping data from a web page that contains a table spanning multiple pages. I am using Python with selenium for this task. The website in question is: The issue I am encountering is related to navigating through the pages of ...

pythonhtmlselenium

What is the best method for validating multiple fields in a form with Javascript?

I am currently working on validating multiple fields within a form. Although I lack experience in JavaScript, I have managed to piece together a code that is functional for the most part. If all fields are left blank, error messages prompt correctly. Howe ...

javascripthtmlformsvalidation

What etiquette should be followed when using the enter key while a file input is selected?

I have a straightforward form with a file input and a submit button. Our 508 compliance testers are encountering an issue during testing. When navigating to the FILE input field and pressing 'enter,' Internet Explorer submits the form. As far as ...

htmlformssection508

How can I adjust the position of a circular progress bar using media queries?

My code involves creating a circular progress bar. However, I am facing an issue where the circles stack on top of each other when I resize the window, as shown in the output screenshot. I want to ensure that the position of the 3 circles remains fixed whe ...

htmlcssbootstrap-4

VueJS can manipulate an inline template by dynamically changing its content and reinitializing

this particular query shares similarities with the discussions on VueJS re-compiling HTML in an inline-template component as well as How to implement Vue js directive in an appended html element Regrettably, the approach suggested in those threads is no l ...

javascripthtmlvue.js

Is there a way to transform this JavaScript function into a jQuery plugin?

Hey there! I've been using this JavaScript function to print a div, but now I realize that I need to switch to jQuery. Can someone lend a hand in helping me convert this to jQuery code? $(document).ready(function(){ function printData() { ...

jqueryhtml

Changing the text alignment to justify in OWA - HTML emails

Having trouble navigating the Outlook Web App (OWA)? It seems like there are countless issues with different Outlook clients, but OWA is definitely the most poorly documented one. The snippet of code below functions flawlessly in all email clients such as ...

htmlcsshtml-emailoutlook-web-app

Creating an array of multiple divs based on numerical input

I am working on a project to show multiple divs based on the user's input number. For example, if the user selects 3, then 3 divs should be displayed. While I have successfully implemented this functionality, I need to dynamically assign IDs to each ...

javascriptjqueryhtml

Do matrix filters in IE7 take into account white space sensitivity?

Utilizing CSS transformations, I am reverting to the following Matrix transform specifically for IE7 and IE8. filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.33, M21=-0.33, M22=0.0,sizingMethod='auto expand') This method function ...

cssinternet-explorerinternet-explorer-7

Adding alternative content when embedding an SWF file in HTML5 - What's the best way to do it?

I am looking to incorporate an SWF file into HTML5. Currently, I have successfully used this code: <embed src="main.swf" width="550" height="400" /> However, I am wondering how I can display alternative content (such as an animated GIF image, or a ...

htmlflash

Animating toggles with JQuery

I am attempting to create a toggle effect for my div using this jQuery script: $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}; }, function() { $("div").animate({left:'0px'}; }, }); ...

javascriptjqueryhtmlcss

A guide to implementing drag and drop functionality using JavaScript

I have developed a unique drag and drop application that features both a left and right panel. The issue I am facing is that when I drag the ball from the left panel to the right panel, it does get dragged successfully. However, the problem arises when the ...

javascripthtmlcss

Discovering if a div element has children using Selenium IDE

As I begin to automate testing for our website with Selenium IDE, I must admit that I am still learning the ins and outs of it. We utilize highcharts to exhibit data on our site. The challenge arises from the fact that there are 3 div elements handling th ...

htmlcssseleniumhighchartsselenium-ide

Problem with CSS: The fixed footer is too wide when set at a width of 100%

I'm experimenting with using percentages instead of pixels and noticing some unusual behavior. Why is my footer extending to the right (beyond the "pagePlaceHolderInner" element)? It works when I assign a specific pixel value to both elements ("pagePl ...

htmlcssresponsive-design

Leveraging both text content and element positioning with Selenium's getattribute() method

I am in the process of creating a test framework using Selenium for a website that includes an ADF generated Tree. The structure of the tree resembles the following: <table> <tr> <td> <div> <span> <a id="AN_ID" t ...

javahtmlxpathselenium

Easily adjust the width of divs within a parent container using CSS for a seamless and uniform

I am designing a webpage where I have set the container width to 100% to cover the entire screen width. Inside this container, I have multiple DIVs arranged in a grid structure with a float: left property and no fixed width, just a margin of 10px. Is ther ...

jqueryhtmlcss

Achieving the desired results through the utilization of CSS3 rather than relying on images

I am currently exploring the use of CSS3 to create a menu instead of relying on images over at . You can view my progress and code (including images and styles) here: Although I attempted to use CSS3 for the border shadow and matching the background of ...

htmlcss

Triangle-shaped image mapping and interactive hover effects

I am attempting to create a simple hover effect using two triangles. One triangle should start below the other, and upon hovering, it should appear above the first triangle. The problem I am encountering is that the surrounding boxes are obstructing the e ...

jqueryhtmlcssimagemap

Encoding data using Angular

I have encountered a situation where my code needs to retrieve table numbers using Javascript and PHP as the database connector. However, when the code works successfully, it displays both the parameter name and value, but I only need the value. How can I ...

phphtmlangularjs

Tips for altering the color of spans that share a common top position without affecting the surrounding sibling elements above or below

Is there a way to change the color of spans with the same top position, excluding sibling elements above or below, in a paragraph made up of spans? I've been working on how to change the color of the line of span tags that contain another span with t ...

jqueryhtmlcss