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

In Python, one way to incorporate an external function into a class is by calling it within the class and then returning to

Just wanted to clarify that I am currently working on implementing data-driven tests on a website using selenium. Here is the main code snippet: from a_folder.abc_file import userJourney from a_folder.a1_file import contact @ddt class testScenario(unit ...

pythonclassseleniumautomated-tests

Increasing the font size on a document

Once again, faced with my own silly problems. This time I stumbled upon the following page: http://jsfiddle.net/g3VBT/ I am trying to style the "enter your U.R.L here" text with the following properties: font-weight: 600; font-size: 1.5em; The issue ...

htmlcssbuttontext

jQuery - Enlarge Tree View to the level of the selected node

I am struggling to figure out how to expand the tree view up to a selected node level. If anyone has any ideas on how to accomplish this, please let me know. For instance, if we click on 'Parent d' in the 'Category list', I want to exp ...

javascriptjqueryhtmlcss

What is the best way to target specific text within the DOM without including text within attributes?

We are currently displaying search results from various posts on our website, and we would like to highlight the search terms in the displayed content. Currently, we are implementing this functionality on the backend using PHP. We iterate through the post ...

javascriptjqueryhtml

Acquire the model from a field within an Angular Formly wrapper

I'm in the process of designing a wrapper that will exhibit the model value as regular text on the page. Once the mouse hovers over this text, it transforms into a Formly field, which works perfectly fine. However, I'm encountering an issue where ...

javascripthtmlangularjsangular-formly

Guidance on incorporating static files with Spring MVC and Thymeleaf

I'm seeking guidance on how to properly incorporate static files such as CSS and images in my Spring MVC application using Thymeleaf. Despite researching extensively on this topic, I have not found a solution that works for me. Based on the recommenda ...

javacssspringspring-mvcthymeleaf

Implementing CSS counter-increment with jQuery

Is there a way to use jQuery to set the CSS counter-increment attribute on ".demo:before" even though jQuery cannot access pseudo elements directly? I recall seeing a suggestion on Stack Overflow about using a data attribute and then referencing that value ...

javascriptjquerycsscountercss-counter

Tips for seamlessly incorporating advertisements into a mixed application

I am having trouble adding banner ads to my hybrid application developed with Telerik. Despite my extensive research, I have been unable to find a suitable solution. Is there any html5 or javascript banner advertising service/API that is compatible with ...

javascripthtmltelerikadsadsense

Issue with EaselJS: mouse events are no longer functional

I'm currently working on adding a touch animation using the EaselJs library. Interestingly, when I load an image from a local folder, all mouse events work as expected, such as onPress. However, things take a different turn when I opt to use an imag ...

javascripthtmlmouseeventeaseljs

CSS: Is it possible to make a div even smaller than the invisible padding of a font?

link to code: http://jsfiddle.net/xVCrn/1/ (best viewed in chrome / webkit) I'm attempting to create a 1px margin for the red section within the dark button area, but I am struggling to adjust the height of the red part. =( The objective is to: ...

css

Leveraging AJAX for seamless PHP execution without page refresh

I have this HTML form: <form class="clearfix" method="POST"> <input name="username" type="text" placeholder="Username:"> <input name="password" type="password" placeholder="Password:"> <textarea name="comment" placeholder="Comment: ...

phphtmlajaxformspost

What is the best way to display a list of database records using Django?

Is there anyone who can assist me with this? I have a list of 60 records from a Django database in my HTML file. My goal is to display that list in a table with 6 columns and 10 rows. However, when using the {% for %} command in the HTML file, the list app ...

pythonhtmldjango

Navigate within the div by scrolling in increments of 100%

I am facing an issue with a div that contains multiple children set to 100% height. My goal is to scroll exactly the height of one child (which is also 100%) on each scroll. However, I am struggling to prevent scrolling multiple steps at a time. I have tri ...

javascriptjqueryhtml

Customize your file input with Bootstrap 4 using bs-custom-file-input and create a Symfony 5 collection with dynamic upload fields

The issue of not having a label for the chosen filename in a bootstrap 4 upload field has been resolved using the plugin https://github.com/Johann-S/bs-custom-file-input You can utilize "bs-custom-file-input" to showcase the selected filename in the boots ...

javascriptphphtmlsymfonybootstrap-4

When using the .html() method on an object element with the Quicktime classid, Internet Explorer tends to

When utilizing .html() to fetch HTML that includes an object with param tags, IE8 will remove the latter and return an empty object element. Check out this jsfiddle showcasing the problem: http://jsfiddle.net/L9rra/1/. Update: Looking for a solution to re ...

jqueryhtmlobjectparameters

Utilize MaterialUI Grid to define custom styles for the ::after pseudo-element

I came across a helpful article on Stack Overflow about Flex-box and how to align the last row to the grid. I'm interested in implementing it in my project: .grid::after { content: ""; flex: auto; } However, I'm not sure how to inc ...

javascriptcssmaterial-ui

Import the CSV file and store it in a designated directory using JQuery

My goal is to enable users to upload a CSV file from an HTML page and have it saved to a specified local directory upon upload. Two possible scenarios could unfold: if the uploaded file already exists, it should be overwritten; otherwise, a new file shoul ...

javascriptjqueryhtmlajaxdom

Enhance your viewing experience with the Zoom feature that activates when

I recently noticed on that I am able to zoom/enlarge a photo by clicking on it. Is there a way for me to incorporate this feature without purchasing the entire theme? While I understand the theme is designed for purchase, I only need this specific functi ...

javascripthtmlzooming

Coding with Angular 4 in JavaScript

Currently, I am utilizing Angular 4 within Visual Studio Code and am looking to incorporate a JavaScript function into my code. Within the home.component.html file: <html> <body> <button onclick="myFunction()">Click me</button> ...

javascripthtmlangulartypescript

Tips for personalizing and adjusting the color scheme of a menu in ant design

I am currently working on a website using reactJs and ant design. However, I have encountered an issue with changing the color of a menu item when it is selected or hovered over. Here's the current menu: Menu Image I would like to change the white col ...

javascriptcssreactjsmenuitemantd