Is there a way to emphasize a particular link in a navigation bar without causing changes to the other links?

I am trying to create a hover effect for my links where they raise up when hovered, but I don't want the other links in the navigation bar to be affected. However, whenever I hover over one link, the others move downward as well. Can anyone help me solve this issue?

Here is the link to my codepen: http://codepen.io/anon/pen/gbxbJQ

#nav1 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  list-style: none;
}
tr > td {
  font-size: 24pt;
  padding-left: 50px;
}
a:link {
  color: black;
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
a:hover {
  display: block;
  padding-bottom: 70px;
}
<div>
  <table id="nav1">
    <tr>
      <td><a href="#">C</a></td>
      <td><a href="#">D</a></td>
      <td><a href="#">E</a></td>
      <td><a href="#">F</a></td>
      <td><a href="#">G</a></td>
      <td><a href="#">A</a></td>
      <td><a href="#">B</a></td>
    </tr>
  </table>
</div>

htmlcss

Answer №1

Set your tds to have a fixed width, make the table's position relative, and the links' position absolute. When hovering, adjust the anchor element's top by -70px and add 70px of padding-bottom. Take a look at this example:

#nav1 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  list-style:none;
  position:relative;
}
td {
   width:40px;
}
a:hover {
    display: block;
    position:absolute;
    top:-70px;
    padding-bottom:70px
}

http://codepen.io/anon/pen/azyOdL

Answer №2

To enhance the layout, consider using relative positioning with a minor adjustment in position (such as shifting up by 5px as shown below).

#nav1 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  list-style: none;
}
tr > td {
  font-size: 24pt;
  padding-left: 50px;
}
a:link {
  color: black;
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
a:hover {
  display: block;
  position:relative;
  top:-5px;
}
<div>
  <table id="nav1">
    <tr>
      <td><a href="#">C</a></td>
      <td><a href="#">D</a></td>
      <td><a href="#">E</a></td>
      <td><a href="#">F</a></td>
      <td><a href="#">G</a></td>
      <td><a href="#">A</a></td>
      <td><a href="#">B</a></td>
    </tr>
  </table>
</div>

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

Including v-menu in a button causes it to vanish in Vuetify

I am facing an issue with my stepper. Specifically, in step 3, I am trying to add a v-menu to a button but when I do so, the button disappears. Below is the code snippet causing the problem: <template> . . . . <v-stepper-step :complete="e6 > ...

javascripthtmlvue.jsmenuvuetify.js

Clickable Slider Picture

I'm having a minor issue with a jQuery script that slides images on my website. The script itself is functioning properly, but I am trying to add links to each image. I've attempted placing <a href> and </a> tags around the <img> ...

javascriptjqueryhtml

Issues with positioning images using media queries

Can anyone help me center an img when the viewport width is 320px? I've attempted different approaches but so far, nothing has been successful. .logo { width: 55px; height: 55px; margin: 10px 0 10px 30px; float: left; } @media only screen a ...

htmlcss

Centering text within a dynamic div can help create a visually appealing design

While browsing through various forums, I noticed several questions on stackoverflow that touch upon a similar issue to mine. However, my particular problem is a bit unique, and despite my best efforts, I have not been able to find a solution yet. It's ...

csshtmlalignmentcentertext-alignment

PHP form functioning correctly on one domain but not on the other

After successfully developing my client's website on my test domain and resolving any issues with the help of the stackoverflow community, I uploaded it to my client's domain. Surprisingly, the form stopped working once it was transferred, despit ...

phpjavascripthtmlformsdns

When CSS animations are used on numerous elements, it can lead to variations in the speed of

I made an animation to move elements from the top to the bottom of a page. I have 4 objects with this animation applied, but for some reason, they are moving at different speeds. It's confusing me. What could be causing this inconsistency? body { ...

htmlcsscss-animations

Implement a vertical background sprite animation using jQuery along with a mask

Is it possible to create a jQuery background vertical animation that smoothly transitions the sprite position, giving the appearance of fading into the next position? Currently, my code (view demo jsfiddle link below) moves the sprite to the correct backgr ...

jquerycssjquery-animatespritecss-sprites

What is the best way to deactivate select option(s) based on the JSON data retrieved through AJAX?

I am facing an issue with a dropdown menu that contains several options. My goal is to loop through these options and set the disabled attribute on specific ones based on the result of an Ajax call. https://i.sstatic.net/9k3f9.png This is what I am tryin ...

javascriptjqueryhtmlajaxjson

The height attribute is not functioning properly in Mozilla Firefox

I am facing an issue on my website where I set the height of the body tag to 1460px. It works perfectly on Chrome and IE, but there are problems on Firefox. See my code below: body { background-image: url('../images/background.jpg&apos ...

csshtml

Is this an acceptable method for aligning absolutely-positioned elements in the center horizontally?

Looking for a way to horizontally center fixed-width elements within their containers without using negative pixel margins? I've found a solution that seems to work well: http://jsfiddle.net/aaronadams/Mquha/ <div class="outer center"> < ...

csspositioningcss-positioncentering

How to link a CSS file from a JavaScript file

I have a form for users with fields for first name, last name, password, and confirm password. I've implemented validation to check if the password and confirm password fields match using JavaScript: $(document).ready(function() { $("#addUser").cl ...

javascriptjavacssjspstyles

Adjustable height for Divs placed between stationary Divs

As a beginner, I have a question that may seem simple to some. I want to create a layout with fixed divs at the top and bottom, but a flexible one in between. To help explain, I've created a sketch. If anyone could provide me with a starting point, I ...

htmlcssheightfixed

The reason the section's height is set to 0 is due to the absolute positioning of the div

Currently, I have a section tag with three divs inside that are positioned absolute (used for the isotope plugin). <section id="section1" class="cd-section"> // pos. static/relative has height 0px <div class="itemIso"> // pos. absolute, he ...

htmlcsspositionheightabsolute

Stop rows from causing the table to stretch in width

We have a unique table structure where the first row contains two cells and the second row contains only one cell. The width of each cell is determined by its content. Our goal is to prevent the cell in the second row from expanding the overall table widt ...

htmlcsshtml-tablewidthcell

How can I use jQuery to switch classes or activate a click event on the most recently clicked element?

Within my <ul></ul>, there are 4 <li> elements. <ul class="wcarchive-terms-list"> <li class="wcarchive-term wcarchive-term-parent woof_term_224"> <label class="wcarchive-term-label"> <span cla ...

javascriptphpjqueryhtmlwordpress

Steps for updating the value of angular inputs within a function

When a card is selected on the page below, the input values should be updated with information from a JSON object. Here is the JSON data: { "status": true, "data": [ { "id": 1, "pessoa_id": 75505 ...

javascripthtmlangular

Troubleshooting Problem with Helvetica Neue Font on Firefox

Recently, I decided to add the Helvetica Neue font to my system. However, upon doing so, I encountered a problem with Firefox browser where the font appeared double when using Helvetica Neue. Is there any available solution for this issue? Here is a scre ...

htmlcsswindowsfirefox

Having trouble with moving the svg:svg element?

I'm struggling to move an svg element that is nested within another svg. I am trying to directly manipulate the x and y values, but I keep encountering a "read-only" error. I attempted to use transform instead, but it doesn't seem to have any eff ...

javascripthtmlsvg

What is causing the turn.js demo to not function properly?

I tested the demo script on fiddle as recommended in the official docs. Upon downloading the script and trying to run it in my browser, I encountered a problem where it did not work, and no errors were displayed on the console. Curiously, when I ran the ...

javascriptjqueryhtmlcssturnjs

Hover effects using CSS3 transitions for the content before

Greetings everyone, I apologize for any language barriers. The title may not be clear at first glance, so let me explain what I am attempting to achieve. I have a navigation menu structured like this: <nav> <ul> <li>& ...

csscss-transitions