This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 7 years ago.
I have following CSS
.dropdown-menu {
background-color: black;
opacity: 0.6;
color: white;
}
.dropdown-menu > li {
background-color: black;
opacity: 1;
color: white;
}
When HTML element (which uses this above CSS) is loaded I'm getting opacity sets as expected from .dropdown-menu, the problem is that this opacity is inherited inside dropdown-menu > li element event when I'm using an !important declaration on opacity.
So how to overcome this (Opacity should remain 0.6 on parent element) and on this child I want opacity 1?
Instead of using opacity for the parent element, declare your colors in rgba format.
.dropdown-menu {
background-color: rgba(0,0,0,.6);
color: rgba(255,255,255,.6);
}
This way, you will retain the opacity of the parent element, as well as your child elements will have an opacity of 1.
Browser support for the same is pretty decent as well.
Also, I read this in your question, "The problem is that this opacity is inherited"
No, it isn't inherited.
It's important to know that opacity sets the opacity value for an element and all of its children; where RGBA sets the opacity value only for a single declaration.
So you should use something like:
.dropdown-menu {
background-color: rgba(0,0,0,.6);
color: rgba(255,255,255,.6);
}
(Of course, you can also use the HSLA-property for this.)
Remember that the opacity-property isn't fully supported by all browsers, please check this SA-topic for more info on this: CSS background opacity with rgba not working in IE 8
Related
This question already has answers here:
What is the opposite of :hover (on mouse leave)?
(13 answers)
Closed 12 months ago.
I was facing one issue all the time. For example we have the following HTML code:
li:hover{
color:rgb(73, 207, 248);
transition: 1s;
}
Color changes with transition when we move mouse on it, but when we move away, transition does't work, and changes happen immediately.
Can someone help me please why is this happening? Thank you in advance.
Because you set the transition property with :hover, your element only has the transition property when you hover. It's just as straightforward as this. You need to give the li element your transition property and only set the color on the selector that uses :hover.
li:hover{
color:rgb(73, 207, 248);
}
li {
transition: 1s;
}
<li></li>
Hi I am new to css and I have came across this text underline animation, I couldn't understand how it works. If I just take something out of this code it just stops working. Thanks in advance!
body {
background-color: black;
}
body a {
font-weight: 200;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
position: relative;
color: #fff;
}
body a:visited {
color: white;
}
body a:hover {
color: white;
}
body a:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 2px solid #fff;
transition: 0.4s;
}
body a:hover:after {
width: 100%;
}
<body>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</body>
An :after psuedo CSS means that another "virtual" element is appended after the selected element
the psuedo element appended on a:after is a simple element with bottom border but is without width (0%)
the transition property on that element means, that all properties of that element when changed will be animated
so...
when you hover the element (stated in body a:hover:after) - the width of that "virtual" element is set to 100% - and the animation takes place
What's really important here are the pseudo-elements ":after" and ":before" (although this last one not present here).
This part here is what makes it come to life:
body a:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
border-bottom: 2px solid #fff;
transition: 0.4s;
}
You see, basically you're looking at the declaration of properties of an element's pseudo element. (You might want to dig in a bit into CSS-CSS3).
It states that after triggering the hover event on an anchor that is a child of body it will make its pseudo element have a bottom border of 2 pixels of width, with a white solid color and a transition of 0.4 seconds.
We can tell by the other declarations that the width of the pseudo-element is 0% in its initial state and after hovering it goes to 100% with a transition (making it go from left to right as seen in the example).
There's much things to consider in this CSS code but you should really learn the basics!
This line creates the animation:
transition: 0.4s;
You will notice that the body a:hover:after rule has a width of 100%. Well, that transition property tells the render engine that there is an animation to be performed on any property that has a value change between the normal and hover state.
When you hover, the render engine reads that you want to set the width property to 100%. Before hover it was set at 0%. Transition says, "ok, on hover, animate the width property from 0 to 100% over a period of 4 tenths of a second.
This will be true of any properties that differ between the hover and non-hover state. In other words, you could animate more than one property at a time so long as the two states define the same property with different values.
I have a script (JsFiddle here) that detects when an li block element is vertically centered on a page and assigns it a .centered class to make it bigger via CSS.
.centered {
height: 30vh;
background-color: #bbb;
-webkit-transition: height 0.6s;
}
Once the central element is identified I manage to select the next sibling to via this:
.centered + li {
height: 20vh;
background-color: #ccc;
-webkit-transition: height 0.6s;
}
The problem arises when I try to select the sibling element preceding the .centered element in pure CSS
After looking at this question from 2011 I tried playing with the :has() pseudo class suggested in one of the comments and other selectors, but with no luck.
This CSS4 relational pseudo class could have done the trick, but is not currently supported:
li:has(+ .centered) {
height: 20vh;
background-color: #Fcc;
-webkit-transition: height 0.6s;
}
I also tried to select the last-of-type of li elements that are not siblings of .centered, but either :not() supports only simple selectors or I'm just not getting how to chain the selectors properly.
Here's the non-working selector:
li:not(.centered ~ li):last-of-type {
height: 20vh;
background-color: #Fcc;
-webkit-transition: height 0.6s;
}
QUESTION: Is there any combination of pseudo classes and selectors that could do the trick in pure CSS?
My hope is that some progress has been made since those questions have been asked.
Is there any combination of pseudo classes and selectors that could do the trick in pure CSS?
There isn't; the reason :not(.centered ~ li) doesn't work is indeed that it only currently supports simple selectors — like :has(), :not() will only accept combinators in Selectors 4. Since there are no pseudo-classes that currently accept combinators, and the only available sibling combinators go forward, you are left with a very restricted domain language in this regard. This is why those additions to Selectors were made.
As for progress... progress on the :has() pseudo-class has been eh. Last I heard, the working group was still deciding between allowing a subset of :has() in CSS or separating that out into its own pseudo-class, and vendors were going to see how much of it they could implement in CSS for this to work. But I don't think there has been any data yet.
Following the confirmation that it is impossible by #BoltClock and the #torazaburo comment I changed my initial jQuery selection starting element
From this:
middleElement = this;
$(this).toggleClass("centered", true);
To this:
middleElement = this;
$(this).prev().toggleClass("top", true);
Without adding extra javascript code, I could then change my CSS selectors.
From:
.centered { /*selects the middle element */
height: 30vh;
background-color: #bbb;
-webkit-transition: height 0.6s;
}
.centered + li { /*selects the next sibling after middle element */
height: 20vh;
background-color: #ccc;
-webkit-transition: height 0.6s;
}
li:has(+ .centered){ /*not supported at time of writing*/
height: 20vh;
background-color: #Fcc;
-webkit-transition: height 0.6s;
}
To:
.top, .top + li + li { /* selects the siblings before and after the middle one*/
height: 20vh;
background-color: #ccc;
-webkit-transition: height 0.6s;
}
.top + li { /* This selects the middle element*/
height: 30vh;
background-color: #bbb;
-webkit-transition: height 0.6s;
}
>> JSFiddle
The title is pretty confusing I know... I have applied a opacity to a parent element. Within that element is a child div that needs to have a different opacity rather than having its parent value. Please see example - http://bootply.com/65163. The buttons need to be opacity:1; rather than its parents opacity:.7;
.carousel-search {
margin: 7% 0 20px -208px;
position: absolute;
z-index: 9;
text-align: center;
opacity:.7;
filter:alpha(opacity=70); // IE
-moz-opacity:0.7; // Firefox
-khtml-opacity: 0.7;
left: 50%;
}
.carousel-search > .btn-group {
opacity:1;
}
This could be done using RGBA. I do not know a better way, do it like this:
.carousel-search {
background: rgba(0, 0, 0, 7);
}
This will add an opacity ONLY to the parent element. The child element is not affected with this opacity. So now you just can leave the opacity for the child element as it was (opacity: 1)
More about rgba HERE
Edit: I found another way, this is more of a css hack, but it will work too. http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
This will do your work:
.carousel-search > .btn-group {
background: rgba(x,y,z,1); //a is value of opacity
}
Also check it out. http://www.w3.org/wiki/CSS/Properties/color/RGBA
This question already has answers here:
How can I delay a :hover effect in CSS?
(3 answers)
Closed 7 years ago.
I have a menu in which onHover apears a infobox, telling what the button does. How can I apply a delay so that the box apears let's say one second after i put my mouse over the button?
HTML:
<td class="info"><a id="login-edit_account" href="../login-edit_account.php">Edit account<span><div id="pointer"></div><p style="font-size:11px">Edit user's information.</p></span></a></td>
CSS:
td.info {
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none
}
td.info:hover {
z-index:25;
background-color:#fff
}
td.info span {
display: none;
transition: 0s display;
}
td.info:hover span { /*the span will display just on :hover state*/
display:block;
position:absolute;
top:42px; left:7px;
width:210px;
border:2px solid #0cf;
padding: 5px;
background-color:#fff; color:#000;
text-align: center;
-webkit-transition-delay:5s;
}
#pointer {
border:solid 10px transparent;
border-bottom-color:#0cf;
position:absolute;
margin:-27px 0px 0px 10px;
}
It's really pretty simple. Example:
a {
-webkit-transition: 1s 3s;
}
a:hover {
background-color: red;
}
When the user hovers the link, the browser waits 3 seconds. Only when those seconds have passed does the background transition to red (in this case with a 1s transition time).
Here's a fiddle: http://jsfiddle.net/joplomacedo/VP7hE/
Yes, you can use CSS3's transitions to delay the :hover effect.
CSS transitions, which are part of the CSS3 set of specifications,
provide a way to control animation speed when changing CSS properties.
Instead of having property changes take effect immediately, you can
cause the changes in a property to take place over a period of time.
For example, if you change the color of an element from white to
black, usually the change is instantaneous. With CSS transitions
enabled, changes occur at time intervals that follow an acceleration
curve, all of which can be customized.
In your case I believe you need to focus on the transition-delay property.
Here are a few useful links in regard to using transitions/example use cases:
https://developer.mozilla.org/en-US/docs/CSS/transition-delay
http://css-tricks.com/transition-delay-delays/
http://designshack.net/articles/css/create-stunning-effects-with-css-transition-delays/