In console if I see, following classes are present:
html.sap-desktop ::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: #f7f7f7;
}
html.sap-desktop ::-webkit-scrollbar-corner {
background-color: #f7f7f7;
}
html.sap-desktop ::-webkit-scrollbar-thumb {
background-color: #e6e6e6;
}
I wanted to give blue color to scroll bar and change width. So this is what I did. Please tell if good idea, if not what other ways can be used.
.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar {
width: 6px;
}
.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar-track {
background-color: #ffffff;
border-radius: 5px;
}
.sapUiBody .sapMPageEnableScrolling::-webkit-scrollbar-thumb {
background-color: #005daa;
height: 3px !important;
}
One more issue I am facing is, when I hover over my scrollbar, it becomes grey.
Add the below CSS in your style sheet and update your colors
.sap-desktop ::-webkit-scrollbar {
width: 16px !important;
}
.sap-desktop ::-webkit-scrollbar-thumb {
background-color: #005483 !important;/* Update color */
}
.sap-desktop ::-webkit-scrollbar-thumb:hover { /* Scrollbar hover */
background-color: #d14900 !important; /* Update hover color */
}
Firt of all it is not a good idea to modify css classess directly..this will change all the instance of say scrollbar in your app...give a css class to parent and then modify the css
e.g
.parentCssClass .sap-desktop ::-webkit-scrollbar {
width: 16px !important;
}
I am writing a mixin in Less that adds a play button to video tags. It looks like this:
.playVideoButton(#size: 64px) {
&:before {
content: "";
width: #size;
height: #size;
top: 50%;
left: 50%;
display: none;
position: absolute;
.transform(translate(-50%, -50%));
.border-radius(50%);
border: 2px solid #fff;
background-color: rgba(0, 0, 0, 0.35);
}
&:after {
width: 0;
height: 0;
content: "";
border-top: #size / 4 solid transparent;
border-bottom: #size / 4 solid transparent;
border-left: #size / 2.4 solid #fff;
top: 50%;
left: 50%;
display: none;
position: absolute;
.transform(translate(-35%, -50%));
}
&:hover {
&:before {
display: block;
&:hover {
background-color: rgba(0, 0, 0, 0.60);
}
}
&:after {
display: block;
}
}
}
It Works fine but I want to make a second hover effect for the :before. So I write at the end: &:hover > &:before > &:hover {background-color: rgba(0, 0, 0, 0.60);} but when I hover the :before element I don't get a change of the background opacity.
Chromes Dev Tool hides the hover settings for pseudo elements. So is it not possible to modify them without JavaScript?
At present you can't attach :hover (or any other pseudo-classes to a pseudo-element). It is implied by the below text in the W3C Spec for pseudo-elements:
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.
and the following one from the W3C Spec for selector syntax:
One pseudo-element may be appended to the last sequence of simple selectors in a selector.
Pseudo-classes (like :hover, :link etc) are simple selectors and a pseudo-element can only be appended after all such simple selectors. So, it rules out the possibility of a div:hover:before:hover or div:before:hover.
In the below snippet, a very simple one, you can see how the div:after:hover selector never gets matched while the div:hover:after does.
div:after {
display: block;
content: 'World';
background: beige;
}
div:after:hover {
background: green;
}
div:hover:after {
border: 1px solid green;
}
div:hover {
border: 1px solid red;
}
<div>Hello!</div>
You should consider creating that play button using an actual child element (instead of a pseudo) and then attach the :hover selector to it.
I have a set of <a> tags with differing rgba background colours but the same alpha. Is it possible to write a single css style that will change only the opacity of the rgba attribute?
A quick example of the code:
<img src="" /><div class="brown">Link 1</div>
<img src="" /><div class="green">Link 2</div>
And the styles
a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}
What I would like to do is write a single style that would change the opacity when the <a> is hovered over, yet keep the colour unchanged.
Something like
a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}
This is now possible with custom properties:
.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }
a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }
To understand how this works, see How do I apply opacity to a CSS color variable?
If custom properties are not an option, see the original answer below.
Unfortunately, no, you'll have to specify the red, green and blue values again for each individual class:
a { display: block; position: relative; }
.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }
.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }
You can only use the inherit keyword alone as a value for the property, and even then the use of inherit isn't appropriate here.
You could do various things to avoid having to hard code the numbers if you want to. Some of these methods only work if you use a plain white background as they're really adding white on top rather than reducing opacity. The first one should work fine for everything provided:
you aren't already using the psuedo-element for something; and
you can set position to relative or absolute on the <div> tag
Option 1: ::before psuedo-element:
.before_method{
position:relative;
}
.before_method:before{
display:block;
content:" ";
position:absolute;
z-index:-1;
background:rgb(18, 176, 41);
top:0;
left:0;
right:0;
bottom:0;
opacity:0.5;
}
.before_method:hover:before{
opacity:1;
}
Option 2: white gif overlay:
.image_method{
background-color: rgb(118, 76, 41);
background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{
background-image:none;
}
Option 3: box-shadow method:
A variation of the gif method, but may have performance issues.
.shadow_method{
background-color: rgb(18, 176, 41);
box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);
}
.shadow_method:hover{
box-shadow:none;
}
CodePen examples: http://codepen.io/chrisboon27/pen/ACdka
No, it's not possible.
You could try a CSS pre-processor, though, if you want to do this sort of thing.
From what I could see, at least LESS and Sass have functions that can make colors more, or less, transparent.
It's now 2017 and this is now possible with
CSS custom properties / CSS Variables (Caniuse)
One classic use case for CSS variables is the ability to individualize parts of a property's value.
So here, instead of repeating the whole rgba expression once again -
we split up or 'individulaize' the rgba values into 2 parts / variables (one for the rgb value and one for the alpha)
.brown {
--rgb: 118, 76, 41;
}
.green {
--rgb: 51, 91, 11;
}
.brown, .green {
--alpha: 0.3;
background-color: rgba(var(--rgb), var(--alpha));
}
Then, on hover we can now just modify the --alpha variable:
a:hover .green, a:hover .brown {
--alpha: 1;
}
a {
display: block;
position: relative;
}
.brown {
--rgb: 118, 76, 41;
}
.green {
--rgb: 51, 91, 11;
}
.brown, .green {
display: inline-block;
--alpha: 0.3;
background-color: rgba(var(--rgb), var(--alpha));
font-size: 40px;
margin: 20px;
}
a:hover .green, a:hover .brown {
--alpha: 1;
}
<a href="#">
<div class="brown">Link 1</div>
</a>
<a href="#">
<div class="green">Link 2</div>
</a>
Codepen
Further reading:
Individualizing CSS Properties with CSS Variables (Dan Wilson)
No, that's not possible.
If you want to use rgba, you must set each value together. There's no way to only change the alpha.
there is an alternative,you can add a linear-gradient background image onto the original color.
a{
background: green
}
a:hover{
background-image:linear-gradient(hsla(0,0%,0%,.2) 100%,transparent 100%) // darker
}
a:hover{
background-image:linear-gradient(hsla(255,100%,100%,.2) 100%,transparent 100%) // lighter
}
also, with css3 filter property,you can do that too,but it seems that it will change the text color
a:hover{
filter: brightness(80%) //darker
}
a:hover{
filter: brightness(120%) //lighter
}
here is a jsfiddle:https://jsfiddle.net/zhangyu911013/epwyL296/2/
Why not use :hover and specify a different opacity in the hover class?
a:hover {
opacity:0.6
}
simple solution :
a
{
position: relative;
display:inline-block;
background: rgba(red, 0.75);
padding: 20px;
&:before
{
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
&:hover
{
&:before
{
background-color: rgba(#000, 0.25);
}
}
}
exemple : https://jsfiddle.net/epwyL296/14/
just play with alpha of background. if you want light instead of darkness, just replace #000 by #fff
I had a similar problem. I had 18 different divs working as buttons, and each with a different color. Rather than figure out the color codes for each or use a div:hover selector to change the opacity (which affects all children) I used the pseudo-class :before like in #Chris Boon's answer.
Because I wanted to do the coloring on the individual elements, I used :before to create a transparent white div on :hover. This is a very basic washout.
#categories div {
position:relative;
width:100px;
height:100px;
float:left;
border:1px solid black;
display:table-cell;
}
#categories div:before{
content:"";
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;
}
#categories div:hover:before {
background-color:white;
opacity:0.2;
}
#a_Particular_Div {
background-color:red;
}
According to CanIUse.com, this should have something like 92% support as of early 2014. (http://caniuse.com/#feat=css-gencontent)
You can do this with CSS variables, although it's a little messy.
First, set a variable containing just the RGB values, in order, of the color you want to use:
:root {
--color-success-rgb: 80, 184, 60;
}
Then you can assign an RGBA value for a color and pull everything but the alpha value from this variable:
.button--success {
background: rgba(var(--color-success-rgb), 0.8);
}
This isn't super pretty, but it lets you use the same RGB values but different alpha values for a color.
Update: It's not possible to do that unfortunately. You'll need to write two separate selectors of:
a.green:hover {background-color: rgba(118,76,41,1);}
a.brown:hover {background-color: rgba(118,76,41,1);}
According to the W3C, the rgba property doesn't have/support the inherit value.
I faced a similar problem. Here's what I did and it works fine( only alpha changes on hover and also the text is not affected) by the following steps:
1) Apply a highlighted(or any of your choice) class to whichever element you wish to change background alpha of.
2) Get the background color rgba
3) Store it in a string and manipulate it(change alpha) as you want on hover(mouseenter and mouseleave)
HTML Code:
<div class="highlighted brown">Link 1</div><br><br>
<div class="highlighted green">Link 1</div>
CSS Code:
.brown {background-color: rgba(118,76,41,.8);}
.green {background-color: rgba(51,91,11,.8);}
Javascript Code:
$(document).on({
mouseenter: function() {
var rgba_str = $(this).css("background-color");
var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.5)";
$(this).css("background-color",new_rgba_str );
},
mouseleave: function(){
var rgba_str = $(this).css("background-color");
var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.8)";
$(this).css("background-color",new_rgba_str );
}
},'.highlighted');
Working Fiddle:http://jsfiddle.net/HGHT6/1/
Simple workaround with opacity if you can accommodate a slight change in background-color:
.yourClass {
// Your style here //
opacity: 0.9;
}
.yourClass:hover, .yourClass:focus {
opacity: 0.7;
}
.yourClass:active {
opacity: 1;
box-shadow: none;
}
.yourClass:hover, .yourClass:focus, .yourClass:active {
text-decoration: none;
outline: none;
}
Building on Yu Zhang's answer:
In :root, (or parent component in Blazor) set css variables:
--bg-img-light: linear-gradient(hsla(255,100%,100%,.2) 100%, transparent 100%);
--bg-img-dark: linear-gradient(hsla(0,0%,0%,.2) 100%, transparent 100%);
Then on any element that you want to apply a hover effect on:
.buttontomakelighter:hover {
background-image: var(--bg-img-light);
}
.buttontomakedarker:hover {
background-image: var(--bg-img-dark);
}
This is about the simplest way; put this in your css stylesheet:
a:hover { color : #c00; }
done!