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

Remove dynamically inserted list item using a button

I have dynamically created an unordered list (<ul>) that adds list items (<li>) when a button is clicked, along with a remove button. Initially, the default list item should not contain a remove button so I added it in the script. SCRIPT $(d ...

javascriptjqueryhtml

Use a text link to upload a file instead of using an input field

While I've seen some discussions on this topic already, the conflicting answers have left me uncertain. Is there a foolproof method for triggering file upload without using an input field? Essentially, I'd like to create a div with an icon and te ...

cssfile-uploadinput

Click on the logo to return to the home page

Logo Link Causing Menu Alignment Issue After setting the logo as a link, the menu unexpectedly shifts to the right. Upon inspecting the menu element, it appears that there is an additional hidden menu link on the left side leading to index.html. Can anyon ...

htmlcsshyperlink

Reducing the Bootstrap Navbar Collapse Width

After spending all day searching for an answer, I still haven't found a solution to my problem. Here is the code I am struggling with: <div class="visible-xs navbar navbar-ti navbar-fixed-top "> <div class="container"> <div class ...

cssasp.nettwitter-bootstrap

An effective method for targeting a specific button within a CSS file

I have multiple button tags in my code, but I need to style a specific one using CSS. How can I target this particular button and apply styles only to it while leaving the others unchanged? Do I need to assign the button to a variable and reference that va ...

javascripthtmlcssangular

A JavaScript pop-up box with two windows

Struggling to create two separate dialog boxes using this code. The issue is that when I add the code for the second dialog box, it only appears if the first one does too. Here's the code for the first dialog: function showPopUp(el) { var ...

javascripthtml

Conceal All Other Divs upon Clicking on a New Div Bearing the Identical Class

I'm having trouble implementing the feature that closes other divs when I click on a new div with the same class. It seems like it should be straightforward, but for some reason, it's not working for me. Here is the link to the fiddle where I&apo ...

javascriptjqueryhtml

What is the best way to display a div based on a keyword match?

If the keyword search results in a match, I can display the corresponding input text and its related category div. Now, I am attempting to also search through category names. If the searched keyword matches a category name, that specific div should be visi ...

javascripthtmljquery

The peculiar effect of a CSS element's border on surrounding elements is quite unusual

I'm experiencing a strange issue that I can't quite figure out. To demonstrate the problem, I've created a fiddle. What's puzzling me is why applying a border to one of the three canvases causes my other two .headerMainDiv elements to ...

htmlcsscss-position

Learn how to render a dynamic checkbox that is connected with AJAX and PHP for seamless functionality

I need to showcase a dynamic checkbox that can be bound using ajax and php. Here is my code: <?php include 'dbconnect.php'; $result = mysqli_query($link, "SELECT * FROM city where district_id='$dist' "); while($city_row=mysqli_fe ...

javascriptphphtmlajax

Use regular expressions and JavaScript to enclose a series of English letters within a wrapper

I am looking to enclose a series or cluster of consecutive English characters within a <span> tag. In simpler terms, I aim to alter the appearance of English language in my writing. Therefore, I need to identify English characters and surround them ...

javascriptjqueryhtmlregex

Having trouble with changing the color of an element when the radio input is checked?

Can someone help me troubleshoot this HTML and CSS code? <label class="radio"> <input type="radio" name="plan" value="plan" required> <span> <h6>Plan</h6> <i class="pe-7s-graph1 ...

htmlcss

Utilizing Azure Mobile Services with HTML

Is there a way to integrate my Windows Azure Mobile Services into an HTML page? I attempted to utilize the code snippets provided in the Azure portal, but unfortunately, they did not work for me. The prescribed code snippets that need to be included in m ...

javascripthtmlazureazure-mobile-services

Creating fixed values in HTML

I need to maintain consistency in the headings of multiple tables spread across 3 HTML pages. The heading structure is as follows: <thead> <tr> <th>MyHeading</th> </tr> </thead> My goal is to store the string MyHeadin ...

javascripthtmlconstants

Chosen Dropdown selection - Retrieve/Receive information

One of the challenges I'm facing involves a dropdown list on my web form that contains various dates. My main query is: How can I retrieve data for the selected date from a MySQL database and present it to the user? Additionally, if the chosen date do ...

phpjavascriptmysqlhtml

What is the best way to make three divs that can be adjusted in size?

Desired Layout: | A | | B | | C | ^ ^ Adjustment Behavior: | A | | B | | C | Current Issue: | A | C | I attempted to enhance the functionality by modifying the provided JavaScript cod ...

javascriptjqueryhtmlcss

Moving draggable items out of a div and placing them into a designated droppable area

I'm facing an issue with dynamically creating draggable "divs" within a "table" and trying to make them drop into multiple droppable areas. The problem is that when I drag the element, it leaves a gap and upon dropping, it lands in multiple places ins ...

jqueryhtmljquery-uijquery-ui-draggablejquery-ui-droppable

What is a clear indication that a <div> is filled with text?

Picture a scenario where a website contains an element that needs to be filled with random text using JavaScript. Once the div is completely filled, it should reset and begin again. It may sound odd, but the question is: how will the JavaScript determine w ...

javascripthtmlcss

Creating dynamic pages using user input in Node and Express

Currently, I am facing a challenge in rendering text using node/express. Within my project setup, there is an HTML file containing a form. The file named search.ejs looks like this: $(document).ready(function(){ var userInput; $("#submit-button-i ...

javascripthtmlnode.jsexpress

Improving Java Performance by frequently replacing one String with another

Currently, I am developing an HttpServlet extension (plugin) for a CMS that is responsible for filtering the HTML response. Within my method filterResponse, I retrieve the requested text/html as a String, which is one of three parameters. The main task a ...

javahtmlstringperformanceoptimization