applying hover effect to text within a table

After investing some time into solving this issue, I am still struggling to find a solution. Essentially, what I want is for the :hover pseudo-class to trigger the border-bottom effect only when I hover over the text in a table.

Currently, the :hover pseudo-class activates when I hover within the table cell, but my aim is to have it activate specifically when hovering over the text.

Here is the link to my jsfiddle for reference:

http://jsfiddle.net/fbubU/1/

(Unfortunately, the border-bottom effect isn't highlighting in the jsfiddle preview)

Here are snippets of my code:

        <table id="navbar">
        <tr>
            <td class="nav1"></td>
            <td id="hover" class="nav2"><a href="http://www.google.com/">home</a></td>
            <td id="hover" class="nav2"><a href="http://www.google.com/">products</a></td>
            <td id="hover" class="nav2"><a href="http://www.google.com/">services</a></td>
            <td id="hover" class="nav2"><a href="http://www.google.com/">about</a></td>
            <td id="hover" class="nav2"><a href="http://www.google.com/">contact</a></td>
            <td class="nav1"></td>
        </tr>
    </table>


table#navbar {
border:3px solid black;
margin:0 auto;
border-collapse:collapse;
}

td.nav2 {
text-align:center;
width:100px;
font-size:20px;
font-weight:bold;
}

td.nav1 {
width:243px;
}

a:visited, a:link  {
color:black;
text-decoration:none;
}

td#hover:hover {
border-bottom:3px solid e8e8e8;
padding-bottom:1px;
}

I apologize if my question is unclear.

Edit: I have fixed the issue with the jsfiddle, thank you for all the responses!

Edit 2: I believe I have successfully achieved the desired functionality, thanks again for all the help.

htmlcsshover

Answer №2

Here's a simple solution:

The issue lies where you are specifying the bottom border color:

border-bottom:3px solid e8e8e8;

It should actually be:

border-bottom:3px solid #e8e8e8;

Now, for a more detailed explanation:

Your code has several other issues that may not be the cause of the error but should still be addressed. Consider using lists for navigation and make sure to use unique IDs for elements in your HTML.

Answer №3

There are a couple of issues to address here. Firstly, you have duplicated the same ID which is causing a problem. You should consider changing your selector to td.nav2 a:hover to make use of the class instead. Secondly, ensure that you include the '#' before the color code in your definition; omitting the hash may result in using a color by name (such as white, black, red, green, blue, etc).

The current CSS selector in place targets the entire <td>.

td.nav2 a:hover {
  border-bottom: 3px solid #e8e8e8;
  padding-bottom: 1px;
}

This will only trigger when the user hovers over the link.

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

Is it possible for me to convert my .ejs file to .html in order to make it compatible with Node.js and Express?

I have an index.html file and I wanted to link it to a twitter.ejs page. Unfortunately, my attempts were unsuccessful, and now I am considering changing the extension from ejs to html. However, this approach did not work either. Do .ejs files only work wit ...

javascripthtmlnode.jsexpress

Receiving JSON information from a web address using Javascript

I'm currently faced with a challenge in extracting JSON data from a web server. Despite the absence of errors in my code, I encounter difficulties displaying any output. Below is a snippet of the issue: <!DOCTYPE HTML> <html> <head ...

javascriptjsonhtml

The functionality of HTML5 canvas image objects is not functioning as expected

I have been working on a function to retrieve an image object using HTML5 canvas, but I keep encountering an error alert (onerror event) function FetchImage() { var img = new Image(); img.src = "http://localhost/assets/images/loadedsprite.png"; ...

javascripthtmlcanvas

Left-align elements within a div container that is centered

I want to left-align my elements within a div container that is centered. I used the text-align property to center the overall div, but now I'm having trouble aligning another content container's text to the left within the center-aligned div. H ...

htmlcss

Develop a novel function

I am working on a new Order page where users can select a category, then a service, and fill out the quantity field for their order. I have an idea to create a function using @if and @else statements. In this function, I want to display the quantity fiel ...

javascriptphphtmllaravel

Limited functionality: MVC 5, Ajax, and Jquery script runs once

<script> $(function () { var ajaxSubmit = function () { var $form = $(this); var settings = { data: $(this).serialize(), url: $(this).attr("action"), type: $(this).attr("method") }; ...

javascriptjqueryajaxasp.net-mvchtml

Issue with Registration Form Redirection

This registration form has been created using a combination of HTML, PHP, and MYSQL. However, after filling out the form and submitting it, the page simply reloads. I'm unsure if there is an issue with my PHP or HTML code. I'm at a loss as to w ...

phphtmlmysql

Steps for inserting an additional header in an Angular table

https://i.stack.imgur.com/6JI4p.png I am looking to insert an additional column above the existing ones with a colspan of 4, and it needs to remain fixed like a header column. Here is the code snippet: <div class="example-container mat-elevation-z8"> ...

javascripthtmlangular

hyperlink triggers spacing problem in Internet Explorer

When displaying a paragraph of text, I add a "read more" link at the end if the text exceeds a certain length. However, in Internet Explorer (IE), the line with the link appears separated from the line above, creating an awkward look. To see where this is ...

phphtmlcss

How can I use Selenium in combination with Python to retrieve the visible text of a selected radio button or checkbox on a webpage?

I am currently working on processing a form where I need to extract the text values of all checked radio buttons. Each line item will have one radio button checked. Here is an example of the HTML structure for a checked radio button: <div style="white ...

pythonhtmlformsseleniumradio-button

Customize the appearance of a hyperlink

I am having difficulty styling a link's title using jQuery-mobile. Each link represents a player with unique abilities. When the user hovers over a player, I want a tooltip to display their special ability. Despite trying various code samples, none ha ...

cssjquery-mobilehyperlinktitle

Looping through mysql data horizontally within a div tag

Looking for assistance to create a content loop similar to the one on this website? I attempted to use a while() loop, but it ended up displaying vertically without using a table. I suspect this page utilizes thumbnails. What I aim for is to have the it ...

phphtmlmysqlcssloops

Retrieval of jQuery remove() method

Essentially, I am utilizing an OnClick function to delete a DIV. Once the OnClick is triggered, it invokes the remove() jQuery function to eliminate the div. Below is my code that implements the removal using remove(): <div id="add"> <button typ ...

javascriptjqueryhtmlajax

Learn how to use the CSS transform-scale() function to scale text independently from its container while maintaining proper alignment

I am currently working on adjusting font sizes to match another one, but I am facing an issue where the container's size is also being affected, resulting in misalignments. I have experimented with different display types (block, inline) and even trie ...

htmlcss

Arranging fixed-width <div>s in rows of four for a sequential display

Below is the code that I am working with: <div style="margin: 0 auto; display:block; width: 916px; overflow: auto;"> <?php echo ""; echo "<i>Owned: $line->phone </i><br><br>"; $query ...

phpcsssql

Using an array of images with CSS and displaying them in HTML

Is there a way to use one class for 3 buttons, each with its own unique background image? I wanted to create an array of background images in CSS and then retrieve them individually for each button. However, after some research, it seems that CSS does not ...

htmlcss

Javascript on-page scroll positioning

My current dilemma involves finding a solution to optimize in-page scrolling for mobile users. I have a sticky header on the page, which causes #section1 to place the scroll position behind the sticky header. Is there a way to adjust the scroll position b ...

javascripthtmlcssscrollanchor

Creating a CSS full-width navigation menu

Recently, I came across a menu code on the web that seemed great. However, I wanted to make my menu responsive and full width. Since I am new to CSS and HTML, adjusting the menu code has been a bit of a challenge for me. .menu, .menu ul { list-style: ...

javascripthtmlcss

Is it acceptable to replicate another individual's WordPress theme and website design in order to create my own WordPress website that looks identical to theirs?

It may sound shady, but a friend of mine boasts about the security of his WordPress website, claiming it's impossible to copy someone else's layout or theme. However, my limited experience in web development tells me otherwise. I believe it is po ...

htmlcssjsonwordpresswordpress-theming

Tips on retrieving an object in a JavaScript function through an HTML event

The js function code is as follows: //Assigning the index of theater array to a variable $scope.setTheaterValue = function(name) { var index = $scope.path.map(function(s){return s.name}).indexOf(name); $scope.path = $scope.path[index]. ...

angularjshtml