What are some techniques to ensure a bookmark retains its original style even when the cursor hovers over it?

My CSS skills are limited, so I am facing what may seem like a basic issue.

On my website, I have a table of contents with links structured like this:

<a href="#user-interface">User interface</a>

Additionally, there is a bookmark in another section coded like this:

<a name="user-interface">User Interface</a>

Furthermore, the CSS file contains the following style rule:

a:hover
{
    color:#D090D0;
    background:#803080;
    text-decoration:none;
}

The objective here is to alter the color and background of the link upon hovering, which is functioning correctly. However, an issue arises where the bookmarks also adopt this styling behavior when hovered over. This makes sense as both the link and bookmark utilize the <a> tag, making it difficult for me to differentiate between them in the CSS. While assigning a class to the link is one solution, I am curious if there might be a more optimal approach.

htmlcsshyperlinkstylesheet

Answer №1

<a name="..."> has been phased out.

It is now recommended to simply use id="..." on any element instead.

If you want to address the question, include :link.

Answer №2

Even though the :link selector may seem effective, W3Schools states that it only targets unvisited links.

(Edit: It turns out that W3Schools provided incorrect information on this matter. The :link selector can actually select <a> tags linking to any destination in some browsers, regardless of whether they have been visited or not. However, the color attribute will be overshadowed by the default browser styles for visited links. As mentioned below, the attribute selector carries more weight than the default browser settings, so if you want your links to always display a specific color you define, irrespective of their visitation status, then you should opt for the attribute selector.)

If you are open to options beyond IE6 compatibility and have specified a doctype for IE 7 and 8, one approach would be to utilize an attribute selector:

a[href]:hover {
    color:#D090D0;
    background:#803080;
    text-decoration:none;
}

Alternatively, adding a class would likely be the most straightforward solution.

Answer №3

Utilize the :link selector in order to target a specific link

a:link:hover
{
    color:#FFAABB;
    background:#112233;
    text-decoration:none;
}

http://example.com/abcd123

Answer №4

Utilize a class:

When working with HTML, remember to utilize the class attribute.

<a href="#user-interface" class="foo">User interface</a>
<a name="user-interface">User Interface</a>

To apply styles in CSS:

.foo:hover
{
    color:#D090D0;
    background:#803080;
    text-decoration:none;
}

By designating the class as foo, the specified style will only be applied to elements with that class.

Answer №5

Enhance the appearance of the bookmark by adding a specific class and applying some styles to it when hovered over:

<a class="bookmark-style" name="user-interface">User Interface</a>

Here is the CSS:

a:hover
{
    color:#D090D0;
    background:#803080;
    text-decoration:none;
}
a.bookmark-style {
    color: black;
    background: white;
    text-decoration:none;
}

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

Select the M3 element in a ul using CSS targeting

I am working with a ul containing some li elements, here is an example: <ul class="M199 WIDTHBOX1 5ColumnBox"> <li class="M2"> <a class="M2" href="about-1561.aspx" target="">About</a> <div class="WIDTHBOX2" s ...

htmlcss

Converting HTML Form Data into CSV with Multiple Rows

I currently have a form that generates a CSV file with data from select elements in the HTML form. The columns in the CSV correspond to the selected options in the form, but I need to extend this functionality to populate multiple rows in the CSV. Expecte ...

phphtmlarrayscsvforeach

JavaScript and CSS failing to implement lazy loading with fade-in effect

Is there a way to add the fade-in animation to an image when it is loaded with JavaScript or CSS? Currently, the code I have only fades in the image once it is 25% visible in the viewport. How can I modify it to include the fade effect upon image load? ...

javascriptcss

Tips for creating a dynamic text that adjusts to different screen sizes within a bootstrap button

When utilizing the w3.css and bootstrap libraries to add a link button, an issue arises when resizing the screen as the text inside the button does not respond accordingly. How can we ensure that the text fits within the button based on the screen resoluti ...

htmlcsstwitter-bootstrapbuttonresponsive

Ways to properly align a navigation bar at the center of the webpage while maintaining the

Whenever I zoom in or out on my page, the homepage button loses its color and fails to expand to the right side. So, I have two main goals: 1) To center the selected area (highlighted by a red border in the image). 2) To extend the green color of the hom ...

htmlcss

Steps for setting all textareas on a website to "readonly" mode

My website contains numerous textareas but they currently do not have the read-only attribute. It would be very time-consuming to manually add the readonly attribute to each one. Is there a more efficient method to make all textareas read-only? ...

javascripthtmlcss

Modifying table background color using AJAX and jQuery?

Scenario: My web page is designed to automatically search for a specific cell input by the user. If the cell has been input with a value, the table's background color will turn red; otherwise, it will remain green. Currently, the table has not been p ...

phpjavascriptjqueryhtmlajax

Discrepancy in Code Outputs

Last night, I spent some time testing out code for basic functions. To preview my work, I used two platforms - Dash and JSFiddle. Everything seemed to be running smoothly on both sites. However, when I uploaded the code to my live website, none of the butt ...

javascriptjqueryhtmlappend

Creating a table to showcase the outcomes of two different conditions

I am struggling to include two conditional result statements in a table, but I can't seem to make it work. If the form input is empty, the result should not be shown. In order to save space, I would like to organize the results in a table with eithe ...

phphtmlcsswordpresshtml-table

javascript onload select the text in the textarea

Is there a way to have JavaScript automatically highlight the text inside a textarea when the page is loaded? ...

javascripthtml

Unable to adjust layout when code is functioning alongside background-color

I'm looking to dynamically change the position of an item on my webpage when it is clicked. Is there a way I can achieve this without relying on id names? I currently have a code snippet that successfully changes the background color, but for some rea ...

javascriptjquerycss

A simple guide on implementing the aria-required attribute into the Material-UI select component

I need some help with implementing the 'aria-required' property on a Material-UI component. Has anyone had success with this before? I haven't tried anything yet since there isn't any information about it in the docs. Thank you in advan ...

htmlreactjsmaterial-uiaccessibility

Crafted using rope-inspired animation, completely CSS-based

My current project involves creating an animation that mimics the action of a rope being cut. Imagine an object suspended by two ropes, with one being cut followed by the other. Although I have made progress in achieving the desired effect, my animation la ...

css

The outline feature cannot be applied to buttons within a btn-group in Bootstrap 4

I have successfully removed the outline for a single button, but I am struggling to remove it for a button within a btn-group class. Check out my JSFiddle DEMO This is the HTML code I am working with: <button class="btn btn-primary">Button without ...

cssbootstrap-4

Incorporate an image icon into an Angular grid

Currently, I am in the process of building a web application using Angular. The main goal is to create a grid and color specific cells based on data input. Below is the snippet of my HTML code: <mat-grid-list cols="10"> <mat-grid-tile * ...

htmlcssangulartypescript

Displaying an image gradually as the user moves down the page

Recently, I came across this fascinating website: As you scroll down, the images on the site gradually unveil more details, which caught my attention. This unique effect is not something commonly seen on websites, and I'm curious to learn how it is ...

javascripthtmlcssweb

"Step-by-step guide on using JavaScript to print a PDF file stored locally

As an illustration, I have a local PDF file with 6 pages. When using the window.print() function, only one page is displayed in print preview regardless of what is shown in the browser. Instead of just one page, all pages should be visible in print previ ...

javascripthtmlangularjs

Updating Angular model remotely without relying solely on the controller

I am struggling to call the addRectangleMethod method from my Javascript code in order to retrieve server-side information into the Angular datamodel. However, I keep encountering an error stating that the method I'm trying to call is undefined. It&ap ...

javascripthtmlangularjstypescript

Is there a way to incorporate jQuery into SharePoint 2010?

I am encountering an issue with linking my HTML page to our organization's SharePoint 2010 portal. All necessary files (CSS, images, jQuery) are stored in the same document library. While the CSS is functioning properly, I am facing challenges with ge ...

javascriptjqueryhtmlcsssharepoint

prismjs plugin for highlighting code displays code in a horizontal format

If you're looking for a way to showcase source code on your website with highlighted syntax, prismjs.com may be just what you need. It offers a similar style to monokai... However, I've encountered an issue where the plugin displays my code in a ...

javascripthtmlcsstinymcecode-hinting