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

Preventing data loss upon submitting a form (PHP)

Currently, I have an HTML file that allows users to select appointment times for specific days of the week. Once they click submit, a PHP file generates and displays a calendar with the chosen times as checkboxes. My goal is to enable users to input their ...

phphtmlformspostinput

Use jQuery to swap out every nth class name in the code

I am looking to update the 6th occurrence of a specific div class. This is my current code <div class="disp">...</div> <div class="disp">...</div> <div class="disp">...</div> <div class="disp">...</div> < ...

javascriptjqueryhtmlcss

Using the position property of relative on a DIV element causes a gap to appear between the DIV and the next

Two div elements are placed consecutively. When I move the first div using position: relative and top: -60px, it creates a gap between them. Take a look at this example here: https://codepen.io/dusannis/pen/oNgBpoK If you notice, there is a noticeable ga ...

css

Is it possible to combine two conditions using CSS?

Hello, I have a question about CSS. In my navigation bar, I have 3 links with different styles: #p1 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 45px; font-weight: bolder; color: #999999; text-dec ...

htmlcsscss-selectors

Show the res.send() method from express.js without replacing the existing html content

Currently, I am in the process of developing a calculator application using express.js. The app needs to handle get requests for an HTML file and post requests that capture user input and provide the response accurately. My challenge lies in showcasing the ...

javascripthtmlnode.jsexpress

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

I am currently working on a one-page website and I would like to include a map as a background behind the "contact" section. The map can be set to float, draggable, or positioned at the back. I have experience using both the Google Maps API and LeafletJS, ...

javascripthtmlcssgoogle-mapsleaflet

Four-region selection box

Is there a way to create a quad state checkbox without using a set of images for various icons? I know how to have a tri-state checkbox with indeterminate, but I need to rotate through 4 states. Are there any more elegant solutions available? ...

htmlcss

I need help picking out specific elements from this messy HTML code using XPath and lxml - any ideas on how to do

I am looking to extract specific strings from this HTML document using only lxml and clever XPath. The content of the strings may vary, but the structure of the surrounding HTML will remain constant. The strings I need are: 19/11/2010 AAAAAA/01 Normal U ...

pythonhtmlxpathlxml

Populate your HTML with JSON data

I need some guidance on how to achieve a specific task. I have a PHP file that retrieves data from a MySQL database and returns it in JSON format. Now, I want to display this data in HTML with "data_from_json" replaced by "18.5". Any assistance would be gr ...

javascripthtmljson

Is there a way to extract a particular value from a JSON URL and transfer it to a JavaScript variable?

I am looking to extract current exchange rates from a JSON URL for implementation in a webpage. Specifically, I want to retrieve a particular exchange rate (such as the US Dollar) and store it in a variable for use within a JavaScript function. Below is a ...

javascripthtmljsonvariablesurl

Interactive pop-up windows in Bootstrap

I encountered an issue with bootstrap modal forms where the form displays correctly after clicking on the button, but the area in which the form is displayed gets blocked! It's difficult to explain, but you can see the problem by visiting this link. ...

javascriptjqueryhtmltwitter-bootstrap

Javascript issue: opening mail client causes page to lose focus

Looking for a solution! I'm dealing with an iPad app that runs html5 pages... one specific page requires an email to be sent which triggers the Mail program using this code var mailLink = 'mailto:' + recipientEmail +'?subject=PDFs ...

javascriptioshtmlipadmailer

Issue with menu height persisting while resizing screen

For my responsive design project, I am implementing a menu that switches to a menu button when the width is less than or equal to 768px. Currently, I am using jQuery to dynamically adjust the height of the menu when the menu button is clicked. The jQuery ...

jquerycssresponsive-design

Modify the height of the panel-header in Bootstrap

I'm attempting to adjust the height of Bootstrap panel-header. However, when I modify the height using the following CSS code: style="height: 20px;" The title inside the header becomes misaligned. To see an example, check out this Plunker demo. Wh ...

htmlcsstwitter-bootstrap

Is there a way to prevent the imported JQuery from causing issues with current code implementations?

Being a novice developer in Html/Javascript/CSS/Jquery coding, I recently encountered an issue while integrating Jquery into my project. When I imported Jquery, the styling of simple buttons went haywire. Jquery worked perfectly fine when using its classes ...

javascriptjqueryhtmlcss

Styling CSS according to the specific words found within the content

After retrieving text data from an API, I want to enclose a specific word, for example "Biography", with <span> and </span> tags in order to apply unique styling. Can anyone provide guidance on how to accomplish this using jQuery or JavaScrip ...

javascriptjquerycss

The IIS appears to be experiencing difficulties in serving static content such as CSS, JavaScript, and images, resulting

I've completed this process a countless number of times... Start by creating a project (in this case, an empty web application using only HTML files). Edit the hosts file to allow for a custom URL (local.xxx-xxx.com) Create an IIS website and app po ...

htmlasp.netiis

"Utilize JavaScript to extract data from JSON and dynamically generate a

I'm currently facing an issue with reading JSON data and populating it in my HTML table. The function to load the JSON data is not working as expected, although the data typing function is functioning properly. I have shared my complete HTML code alo ...

javascripthtmljson

Text within the footer section

When displaying the name of a subcategory, I want it in one line. However, if the subcategory name contains two words, it should be displayed in two lines. https://i.stack.imgur.com/CcDeL.png Code: .Footer { width: 100%; display ...

htmlcss

Is it possible to access forms and input fields in an AngularJS script without having to pass them from the HTML code?

Seeking a solution for input field validation, I have written code where input field states are passed from HTML to a script through a function. However, my goal is to directly retrieve the values in the script without passing them from the HTML when calli ...

javascriptangularjshtml