I am developing a website with two themes Light and Dark. I want to change the hover background of links based on the theme selected. What is the way to change the background of hover using CSS?
on a White background, I have a light blue hover background to link.
on a Dark background, I want to have hover background transparent to link.
I tried with changing class with the theme but I am not sure how to write selector for hover with the class change.
<a href='' className={theme ? ' top_section_link ' : ' top_section_link_dark '}>
CSS for hover on the link. It works fine for light theme but I don't know how to write selector if I change the class.
.lead a:hover {
color: #2161f2;
background: #f0f4fe;
text-decoration: none;
border-bottom: 2px solid #2161f2;
}
Make the hover css code dependent on the link. So instead of
.lead a:hover { /* ... */ }
write it this way:
.lead a.top_section_link:hover { /* Light/Default Theme Hover */ }
.lead a.top_section_link_dark:hover { /* Dark Theme Hover */ }
Another way would be to only switch a class on the body tag. This allows switching the theme without checking the current theme everywhere in your JS code:
body.light-theme a:hover{}
body.dark-theme a:hover{}
/* with other elements: */
body.light-theme button{}
body.light-theme button:hover{}
body.dark-theme button{}
body.dark-theme button:hover{}
Choosing this way, SCSS would make your life easier.
To target the link using the theme class names you can use a.top_section_link:hover or a.top_section_link_dark:hover.
.lead a:hover {
color: #2161f2;
background: #f0f4fe;
text-decoration: none;
border-bottom: 2px solid #2161f2;
}
.lead a.top_section_link_dark:hover {
background: none;
}
<div class="lead">
Link
Link
</div>
Related
Is there a method of using conditionals to apply a style to my input when it is hovered and not active?
use case:
Unhovered: Background = white (or no style applied)
Hovered and not active: Background = lightgrey
Hovered and is active: Background = white (or no style applied)
I was thinking of the various attributes of an input that are available within Angular such as dirty, touched etc..., but I am not sure of how to use them to this effect?
Any pointers would be great.
Here is a stackblitz with the example html
// This can be used by [ngClass]
.grey {
background: lightgrey;
}
input:hover {
background: lightgrey
}
<form [formGroup]="myForm" (submit)=submit()>
<input formControlName="myInput" type="text">
</form>
Use :not property, this working snippet might helpful to you.
.test:hover:not(:focus)
{
background: #D3D3D3;
}
<input type="text" class="test" />
You can use the :not() pseudo-class
pre {
background: white;
}
pre:hover:not(:active) {
background: lightgrey;
}
<pre>
Unhovered: Background = white (or no style applied)
Hovered and not active: Background = lightgrey
Hovered and is active: Background = white (or no style applied)
</pre>
Use focus and hover pseudo code.
input:hover {
background-color: lightgray;
}
input:focus:hover {
background: white;
}
<input type="text">
I have a button inside the anchor tag(defined it using class).
<a id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px; FONT-WEIGHT:normal; FONT-SIZE:11pt;" onclick="doSomething();">More</a>
Now I want to disable it.So I have used the following code to disable the anchor tag.
moreButton.disabled = true;
The anchor tag is not working after disabling it , but the button of anchor still looks as if it is not disabled i.e. not grayed out. Is there any way to disable the button? Please let me know if you need any additional information.
The best way to disable an anchor tag is to give it the correct pointer-events property. Here's a simple example how to disable the anchor tag with one simple CSS line:
a {
pointer-events: none;
}
I am a disabled anchor tag
As others have said, inline CSS is bad practice so you should export your style code to a separate CSS file, as so:
.contactButtonSmall {
position:absolute;
left:225px;
top:165px;
font-weight:normal;
font-size:11pt;
}
Then you can use the :disabled selector to change the appearance of the button when it is disabled:
.contactButtonSmall:disabled {
/* Styling for disabled button */
}
I have used button along with the style attributes
background-color: Transparent;
border: none;
instead of anchor tag to fix the issue. The style attributes helped to remove the grayed out area of the original html button and to keep my own image for the button.
example code is given below:
<button> id="moreButton" class="contactButtonSmall" style="position:absolute; left:225px; top:165px; FONT-WEIGHT:normal; FONT-SIZE:11pt; background-color: Transparent;border: none;" onclick="doSomething();">More</button>
In CSS file:
.contactButtonSmall {
position:relative;
display: block; /* 'convert' <a> to <div> */
width: 60px;
max-height: 20px;
padding-top: 2px;
padding-bottom: 2px;
background-position: center top;
background-repeat: no-repeat;
background-image: url(../contactImages/blankSmallButton.gif);
text-decoration: none;
text-align: center;
cursor:pointer;
background-color: Transparent;
border: none;
}
You can use a mixture of CSS and JS to accomplish this:
HTML:
<a href="/" id="myLink">
click me!
</a>
CSS:
#myLink {
background: red
}
a#myLink.disabledLink {
background: grey;
cursor: not-allowed;
}
JS:
document.getElementById("myLink").onclick = function(e)
{
e.preventDefault();
this.className += " disabledLink";
}
jsfiddle here
this on click prevents the default action of the anchor tag and assigns it a class. The class has css that makes the cursor show the now-allowed icon as well as changing background colour to grey.
I'm tweaking SE's web UI with a Greasemonkey script in Firefox 46.0.1 but I'm stuck at the following issue.
My .css contains the following for drop-down menus:
/* From: http://www.w3schools.com/howto/howto_css_dropdown.asp */
/* Dropdown button on hover & focus */
/*.igb-button:hover, .igb-button:focus {
background-color: #3e8e41;
}
*/
/* The container - needed to position the dropdown content */
.igb-dropdown-container {
position: relative;
display: inline-block;
}
/* Change the colors of the dropdown button on hover */
.igb-dropdown-container:hover {
background-color: #07c;
color: white;
}
/* Show the dropdown content on hover */
.igb-dropdown-container:hover .igb-dropdown-content {
display: block;
}
/* Dropdown content (hidden by default) */
.igb-dropdown-content {
display: none;
position: absolute;
left: -7em;
/*background-color: #f9f9f9;*/
min-width: 16em;
box-shadow: 12px 12px 6px 0px rgba(0,0,0,0.2);
z-index: 9999;
}
/* Links inside the dropdown content */
.igb-dropdown-content a {
color: DarkSlateGray;
padding: 4px;
text-decoration: none;
display: block;
}
/* Change color of dropdown content links on hover */
.igb-dropdown-content a:hover {
background-color: #07c;
color: white;
}
I add the menus with the following code:
for ( let tag of tags ) {
...
let dropdown = $('<span>')
.attr('id', 'igb-dropdown-content')
.addClass('igb-dropdown-content')
//.insertAfter($('#content')) // inserted here as sibling of 'content',
//.offset($(tag).offset()) // since 'sidebar' is to small to display menus properly
$('<span>') // Why is this not focusable, even if it is an '<a>'?
.attr('id', 'igb-dropdown-container')
.addClass('igb-dropdown-container')
.append( $('<a>')
.text("▼")
.addClass('igb-button')
)
.insertAfter(tag)
.append(dropdown) // inserted above as sibling of 'content',
// since 'sidebar' is to small to display menus properly
...
}
This works but looks like the following:
To get rid of the parent's (sidebar) width limitation I had the idea to put them a level higher in the DOM and use offset positioning. Hence, I refactored the above code as mentioned in the line comments, i.e. I flipped the code comments. The result is that none of the menus is shown when hovering over ▼.
I checked the DOM with Firebug and all the menus are there at the intented place (siblings of content). If I disable display:none; in .igb-dropdown-content all menus are shown. But all of them stay grayed out when hovering over ▼.
P.S.: The question in the code concerning focusing still puzzles me, too.
UPDATE: I put a minimal working example on https://jsfiddle.net/2hd9j4ms/
in css I define the behavior of the text links like this:
a:link {
color: gray;
}
a:active {
color: #9999ff;
}
a:hover {
color: #9999ff;
}
a:visited {
color: gray;
}
Works fine. After I visited a link it should/ and does still have the same color. BUT, and that's what I don't get... after I visited a link it does not hover anymore. How can I make the text link behave the same way always: e.g. link:gray hover:blue???
Thx
#Frits van Campen is correct, the visited pseudo-class selector is overriding the hover selector, this fiddle has it fixed.
a:link {
color: gray;
}
a:active {
color: #9999ff;
}
a:visited {
color: gray;
}
a:hover {
color: #9999ff;
}
This is a CSS Specificity issue.
Rules of the same specificity will apply according to the order they were defined.
You should move the more important rules to the bottom of the list, so they take precedence.
Any pseudo-class you don't need, simply do not define it
NB: 1. follow this ordering of a to ensure styling apply to links
2. It's not necessary to specify {visited, focus, active} if you aren't using it.
a,
a:link {
color: fontColor(color2);
text-decoration-color: fontColor(color4) !important;
text-underline-position: under; // to increase the gap between text and underlining in CSS
text-decoration-thickness: 2px;
font-weight: 600;
}
a:hover {
text-decoration-color: fontColor(color2) !important;
}
// mind you am using SCSS (fontColor(color2))
###Try this I think it will work###
hover MUST come after link and visited in the CSS definition in order to be effective active MUST come after hover in the CSS definition in order to be effective.
Copied from w3school
I want that some of my jquery dialogs, not all, have a different title bar color.
How can I acheive this?
I used the property dialogClass:"myClass" in desired dialogs but this doesen't change the title bar, just the dialog body.
Thank you!!
Specifying a dialogClass adds this class to the outermost div wrapping the entire dialog including the title bar, so you just have to make sure that you CSS rule is targeting the correct element. For instance:
.myDialogClass .ui-widget-header {
background: purple;
}
div.ui-widget-header {
border: 1px solid #3b678e;
background: #3b678e url("images/ui-bg_gloss-wave_35_3b678e_500x100.png") 50% 50% repeat-x;
color: #ffffff;
font-weight: bold;
}
You could do:
div#myDialog .ui-dialog-titlebar {
background-color: red;
}
The .ui-dialog-titlebar is what you are looking to apply your style to.