Is there a way to remove background-color for a:focus?

When working with Twitter Bootstrap, I encountered a challenge. The background-color properties set for navigation items on the :focus state were causing an issue for a specific navigation element that needed have its own styling.

Imagine a scenario where in a custom theme, the default background color of a navigation item is dark red. Upon hovering over it, the color changes to light red. However, due to Bootstrap's declaration for the :focus state, clicking on the navigation item and moving the mouse away results in it turning light grey (as per the default Bootstrap theme). This behavior was something I wanted to remove.

The goal was to maintain the default behavior of the navigation item - dark red without the mouse hover and light red upon hovering. Unfortunately, attempts to achieve this were futile as the :focus state seemed to override the :hover state. Any declaration made for :focus affected both mouse hover and mouse away interactions.

I experimented with background-color:transparent and background-color:inherit, but the underlying issue persisted. No matter what color was specified, it remained consistent regardless of whether the mouse was over the link or not. My ultimate objective was to ensure that the background color changed only when hovering over the link, even when it had focus.

csstwitter-bootstrap

Answer №1

Enhance your unique element with an additional class and define the CSS styles.

.SpecialElement:focus{
    background-color: #F2F2F2 !important;
}

.SpecialElement:hover{
    background-color: #D9D9D9 !important;
}

.SpecialElement{
    background-color:#E6E6E6 !important;
}

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

Experiencing difficulties with JavaScript/jQuery when encountering the 'use strict' error

I have been working on a small function to change the background of an HTML file, but I keep getting the 'Missing 'use strict' statement' error message from JSLint despite trying multiple solutions. Can anyone suggest how to resolve th ...

javascriptjqueryhtmlcss

Resizing an image that is being pulled from a database

I am currently working on a challenging database project that seems to have hit a minor cosmetic roadblock. The database I'm dealing with loads profiles into arrays for display using a PHP while loop, making it easy to display content and allow for a ...

phpcssimageresize

Using a Bootstrap modal with angular-ui causes the scrollbar to mysteriously disappear

When I open a modal in my directive code, I use the following method: var modalInstance = $modal.open({ templateUrl: "app/templates/modal-assign.html", controller: "assignModalController", resolve: { "call": function() { ...

angularjstwitter-bootstrapangular-ui

Incorporate a platform-specific button in a user interface with React Native

I need to display a button that is only shown on iOS, not on android. I have tried using the following style, but it doesn't seem to be working. ...Platform.select({ android: { display:'none', }, The code for my button is: <Bu ...

cssreact-native

The headline is being improperly rendered inside a black box on Firefox

A while back, I inquired about creating a black box with padding around a two-line headline. The solution worked well, except for older versions of Internet Explorer. However, in Firefox, there are occasional issues with the display looking jagged. This oc ...

cssfirefoxpaddinghtml

Parent menu fails to trigger the opening of child menu upon clicking

I'm struggling to modify a Wordpress theme to enable the child menus to expand when clicking on the parent menus. Is there a way to edit this code to make that functionality work? // Implement expandable menus var expand_link = $('<a class="m ...

javascriptcsswordpress

A pair of floating divs sandwiching a stretchy div in the middle

I am looking to achieve a fixed width header with specific layout requirements: A left-aligned div of variable width. A right-aligned div of variable width. An h2 element centered between the two divs, adjusting its size based on available space. The co ...

csslayouthtmlcss-float

Align the radio button group in the center with corresponding labels

I have several radio buttons with labels that vary in length. I am trying to figure out how to center them horizontally so that the labels are centered on the page, but still appear as if they are left-aligned. Desired result: Current HTML snippet: < ...

htmlcssradio-button

Tips for adjusting the height of a selection box in jQuery Mobile

I am trying to make the select box height the same as the label (模板分類:). <select id="TamplateClass" style="height:1.5em">...</select> you can use CSS #TamplateClass{height:1.5em;} However, no matter what I try, the results are all th ...

cssjquery-mobile

Center user input within a div element

I am trying to achieve proper alignment of input elements within a div. When the div is clicked, the input should be displayed; otherwise, a span should be shown instead. Here is my code: <!doctype html> <html lang="en"> <head&g ...

htmlcssvue.js

Viewing content below a clear, fixed element

Check out the image regarding the issue I'm currently working on a page that features a fixed header with a transparent background. My goal is to make the content below this fixed header disappear when scrolled under it, similar to how it would behav ...

htmlcss

A div without any content and styled with a percentage height will appear as invisible

I'm working on creating a responsive background image for a room, where I want the wall to take up 2/3 of the vertical height and the carpet area to cover the remaining 1/3. Here are snippets of the code I've been using - my issue is that I am t ...

htmlcss

Issue with React-Route not displaying components

Below is the code snippet from my app.js file: <Router> <Header title="My Todos List" /> <Routes> <Route path="/about" element={<About />} /> <Route path="/" ...

javascripthtmlcssreactjs

What could be causing my CSS div class to cover up the image in the background?

Within my HTML code, I have a <div> that contains a whole partial view: <div class="bkgImg"> /* content goes here */ </div> Inside this main <div>, there are two additional <div> elements - one without a class and one wi ...

htmlcss

Exploring CSS Shapes: Unveiling the secrets behind the star. What's the mechanism at

https://i.stack.imgur.com/0BgQr.png Take a look at the code snippet below showcasing The Shapes of CSS. I'm interested in delving into the intricacies of these CSS properties. How exactly do shapes in CSS function? This includes pseudo CSS, borders, ...

htmlcsscss-shapes

WordPress footer widgets appearing misaligned

I have made a child theme for Twenty Thirteen and am in the process of making some updates to it. My development site is essentially a replica of the live site. The only modification I made in the footer section was to change the widget title styles, but I ...

htmlcsswordpress

How come my dimensions are not returning correctly when I use offset().top and scrollTop() inside a scrolling element?

Currently in the process of developing a web app at , I am looking to implement a feature that will fade elements in and out as they enter and leave the visible part of a scrolling parent element. Taking inspiration from myfunkyside's response on this ...

javascriptjquerycssscrolloffset

What could be causing the issue with the pseudo-class :first-of-type not functioning correctly?

How come this piece of code executes successfully, querySelector("p + p"); while the following code snippet results in null? querySelector("p ~ p:first-of-type"); ...

csscss-selectors

Material User Interface, MUI, Modal, Back to Top Scroll按钮

After spending some time experimenting with scrollTop and the Dialog component (a fullscreen fixed modal) from Material-ui, I found that I couldn't quite get scrollTop to function properly. Whenever I clicked the "go down" button, it would either retu ...

javascriptcssreactjsmaterial-ui

Use ng-class in a P tag to assess a variety of expressions

Is there a way to apply ng-class to automatically evaluate negative values within a < p > tag? <p <strong>LW$:</strong> {{d.lw_metric}} <strong>LW:</strong> {{d.lw_metric_percentage}} <strong>L4W:</strong> {{ ...

javascriptcssangularjsng-class