Ways to eliminate hover effect in CSS

I have a text that is currently displayed as a hyperlink, and some CSS code is causing it to underline and become bold when hovered over. I want to remove the hyperlink, but still keep this style by default without needing to hover over the text. Here is my HTML and CSS code:

.faq .section p.quetn a:hover {
    text-decoration:underline;
    font-weight:bold
}
<p class="quetn"><a href="">5.14 Where do i see my test results?</a></p>

It's important that I cannot change the existing CSS, so I need to override it with a new class. Can you help me accomplish this? Thank you in advance.

htmlcssclass

Answer №1

When the link is not being hovered, simply follow this rule:

.faq .section p.quetn a, .faq .section p.quetn a:hover {
    text-decoration:underline;
    font-weight:bold
}

UPDATE

I've noticed that you are unable to modify the CSS for some reason.

You can create a new class with the same styles instead.

a.class, a.class:hover {
    text-decoration:underline;
    font-weight:bold
}

<a class="class" title="" href="#">Some Link</a>

UPDATE v2

If you want to style the text without the link markup, you can do the following:

Simply use:

<p class="class">Text</p>

p.class {
    text-decoration:underline;
    font-weight:bold
}

Answer №2

I enjoy it this way

example

styling with css

.quetn a:hover {
    text-decoration:underline;
    font-weight:bold;
}

Answer №3

Instead of using the following CSS selector:

.faq .section p.quetn a:hover

You should use:

.faq .section p.quetn a

If you want to target only the P tag instead of the anchor tag, then use this selector:

.faq .section p.quetn

Answer №4

Learn to style HTML elements using CSS

<p class="info newStyle"><a href="">How to customize text decorations?</a></p>

CSS for Text Decorations

.info a:hover {
        text-decoration:underline;
        font-weight:bold;
        cursor:default;
}

.newStyle a:hover{
        text-decoration:none !important
        font-weight:bold !important
        cursor:default !important
}

Remember to use !important for higher priority when styling elements.

Answer №5

Below is the code to enable Hover:

a:hover {
  background-color: yellow;
}

Below is the code to disable Hover:

a:nohover {
  background-color: yellow;
}

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

Transitioning images in JQuery by using a rollover effect

Is there a way to use Jquery for a hover effect that transitions images with a slide up animation? I've looked everywhere online, but I can't seem to find a code that works. All the examples I've found use fadeIn or fadeOut. Thank you for yo ...

javascriptjqueryhtmlimagetransition

What are the advantages of incorporating JSON for retrieving data from MySQL?

So I have developed a website that retrieves data from a MySQL database using PHP, and then transforms it into JSON format for use with JavaScript. This process can be broken down into 5 steps: Query -> PDO Statement -> PHP Array -> JSON Strin ...

phphtmlmysqljsonajax

Concealing Images in HTML Without Reserving Space for Them

Our task is to create a website here: I tried hiding elements using display: none; However, I ended up with a large blank space. This is the HTML code: <h1>OUR PORTFOLIO</h1><div class="subtext-top">CLIENT-FOCUSED MEDIA PRODUCTIO ...

jqueryhtmlcss

Place the video element within the Canvas element

I'm trying to incorporate a video player on Canvas. My video has an alpha channel, and I want to play it over a jpg image. This is the code snippet I've put together: <video id="mainVideo" src="item0.mp4"> </video> <canvas id="m ...

htmlcanvashtml5-canvashtml5-video

Using PHPs nth-child in media queries

There are multiple images on MyPage, typically displayed in rows of 6. However, the number of images per row adjusts based on browser size using media queries. The issue arises with the margin set for the last image in each row, as the nth-child property r ...

phphtmlcss

Error: Attempting to access property 'question' of an undefined value

Trying to render information from a local .json file using Javascript functions, I encountered an error in the console for const answer despite being defined. I temporarily commented it out to test the function, only to receive the same TypeError for quest ...

javascripthtmlreactjstypeerror

What is the best approach for promoting reusability in Angular: creating a new CSS class or a new component?

I have a div with a set of CSS properties that are essential to my application. These properties will be reused across multiple pages and components. <div style="display: flex; flex-direction: column; height: 100%"> //inner html will vary based on c ...

htmlcssangularangular8

The alignment of Div elements is off in IE8

I have been struggling to align two divs side by side without any empty spaces on IE 8. Everything looks perfect on Chrome Version 35.0.1916.153 m and Firefox 30.0, but IE 8 seems to be causing some issues. All I want is a main div with two child divs ali ...

htmlcssgoogle-chromefirefoxinternet-explorer-8

Steps to extract a hash from a document's URL

The following code is used: jQuery(document).ready(function() { console.log($(this)); }); After running this code, the object displayed in the console is: [Document mypage.html#weather] How can I retrieve the last ID from this object? In this ...

javascriptjqueryhtmlcss

What is the reason for the disappearance of unordered list bullets when using padding: 0?

Updating an older website that contains numerous unordered lists has presented a challenge. When the padding is set to 0, the display markers on the unordered list disappear. The root cause of this issue was traced back to the CSS setting *{padding: 0; ma ...

htmlcsshtml-lists

When switching between classes, it is not possible to apply a different value to the same CSS property

I am currently working on a project that involves toggling a class on a ul tag with an id of sideNav using JavaScript. In this scenario, I have set the left attribute of the id to 0, while the same attribute in the class has a value of -100%. After sever ...

javascripthtmlcss

Top-rated program for creating user guides using HTML code

I am currently working on a project that involves creating end-user documentation for a software application. However, the software will be retired next year, so I do not want to spend too much time on producing a professional-grade manual. The documentati ...

phphtmlmultimediaend-useruser-manual

I am encountering issues with setting a background image in Bootstrap 3.1.1 while trying to achieve a par

I'm struggling to add a background image to my bootstrap site. I'm attempting to create a parallax site using stellar.js, and while the site is functional with text on each slide and correct scrolling links, the images just won't load. Despi ...

cssimagetwitter-bootstraptwitter-bootstrap-3parallax

Verify the presence of blank space with javaScript

I currently have a text box on my website. <input type="text" name="FirstName" value="Mickey"> My goal is to prevent the user from entering empty spaces, tabs, or new lines in the text box. However, I want to allow spaces between characters. Does a ...

javascripthtml

Tips for incorporating JavaScript into elements that have been modified using jQuery's .html() method

Consider this example: $('#key').on('click', function(){ $('.task').html("<button id='key'>Button</button>"+Date()); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.j ...

javascriptjqueryhtmlajax

Avoid activating the hover effect on an element situated below another element without the use of JavaScript

After reviewing various posts, it seems like the only solution involves using javascript. Is there a way to hover over one element without affecting the style of another element below it, all without relying on javascript? I'm looking for a solution u ...

htmlcss

Using a <div> to contain <mat-card> in Angular Material

Can you achieve the following: Show components with specified width in a row instead of the usual column layout Enclose the cards within another defined container I've been attempting to accomplish this but without success so far.... While materia ...

htmlcssangularangular-material

Using Jquery: Removing the strikethrough effect upon the second click!

Currently in the process of learning Jquery and experimenting with using a button to apply a "text-decoration" to a list item upon clicking. However, I encountered an issue where I couldn't figure out how to use the same button to remove the "text-dec ...

jquerycss

Shifting Transition for Customer Reviews

I am working on implementing a testimonial slider on my webpage located at . I am trying to make it automatically slide by itself, but have been unsuccessful so far. I would appreciate if you could visit the demo page on my website and help identify what ...

jqueryhtmlcss

Is there a way to divide v-progress linear into 4 pieces in Vuejs, or are there alternative design options for achieving this in Vuetify 2?

I have set up a table in Vuetify 2 with a v-progress-linear component to monitor the user's remaining time. Initially, my implementation was simple like this. However, we decided to split it into 4 sections for better visibility of the user's ti ...

csstypescriptvue.jsvuetify.jsprogress-bar