http://fiddle.jshell.net/9m6a5y5p/
As you can is in demo above, when hover above span element tooltip is shown and i want only to show when hover on span... Yes I know i can use display: none, but i am trying to avoid that...
tooltip {
color: #E4095C;
position: relative;
}
.tooltip::before,
.tooltip::after {
opacity: 0;
z-index: -100;
position: absolute;
}
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
z-index: 100;
}
.tooltip::before {
content: '';
border: .825em solid transparent;
border-top-color: #0D8EAD;
bottom: 45%;
left: 35%;
}
.tooltip::after {
content: attr(data-tip);
width: 12em;
padding: .85em;
background: #0D8EAD;
bottom: 175%;
left: 5%;
margin-left: -3.25em;
color: #f8f8f8;
}
Just add following css after .tooltip::after{}
.tooltip::after {
pointer-events: none;
}
Have fun..!!
You can use pointer-events to prevent hover events from firing. Add this to your CSS:
.tooltip::after {
pointer-events: none;
}
Related
I have a problem with my stepper line. I wanted that at the end of the step it won't extend another line. And I want it that at the end of the step it will stop from extending it's line. Below is the image and the codes that I am trying to implement.
Here is the image result
&:first-child {
._schedule-item {
&:after {
display: none;
}
}
}
&:last-child {
.schedule-item {
&:after {
display: none;
}
}
}
._stepper {
background-color: rgb(38,170,224);
border: 3px solid rgb(38,170,224);
border-radius: 100%;
width: 7px;
height: 7px;
&:after {
content: "";
position: absolute;
width: 1px;
position: absolute;
height: 100px;
background-color: rgb(38,170,224);
left: 29.5px;
}
}
._stepper:last-child:after{
display: none;
}
Make the steppers last child after to display none
I would rather use opacity to hide than display:none
._stepper {
&:last-child {
&::after {
opacity: 0;
}
}
}
I have button with a pseudo element I placed underneath to create a clicking effect. I wrote this code:
button {
appearance: none;
--webkit-appearance: none;
background-color: #0070c9;
border-radius: .3em;
border: none;
color: white;
display: inline-block;
font: inherit;
font-size: 1.5em;
padding: 5px 10px;
position: relative;
text-transform: uppercase;
}
button::after {
background-color: #005496;
border-radius: .3em;
bottom: -.2em;
content: '';
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
button:active, button:focus {
outline: none;
}
button:active {
transform: translateY(0.1em);
}
button:active::after {
bottom: -.1em;
}
<button>Button</button>
When the button is clicked, the pseudo element becomes the background of the button; I want the light background to remain over the pseudo element while the transform occurs and after. Is there a reason that the pseudo element moves under the text but above the background of the button?
Note: I am not using any vendor-prefixed CSS in my original code, I just added --webkit-appearance: none; to this page; I will use a post-processor to handle this later.
Edit
The button looks like the left when not in active state, and the the right image in active state.
I do not want the button to become dark when it is in active state. I want the background to remain the same.
I want the button to look like this when it is clicked:
I have added a ::before pseudo element as well and then shifted the z-index of the :before and :after pseudo elements when the button is active. I have also added a span around the buttons text and added a positition of relative and a z-index of 3 to bring it to the front of the pseudo elements.
button {
appearance: none;
background:none;
--webkit-appearance: none;
border-radius: .3em;
border: none;
color: white;
display: inline-block;
font: inherit;
font-size: 1.5em;
padding: 5px 10px;
position: relative;
text-transform: uppercase;
}
button span {
position:relative;
z-index:3;
}
button::before, button::after {
border-radius: .3em;
content: '';
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
button::before {
background-color: #0070c9;
top: 0;
z-index: 2;
}
button::after {
background-color: #005496;
bottom: -.2em;
z-index: 1;
}
button:active, button:focus {
outline: none;
}
button:active span {
bottom: -.2em;
}
button:active::before {
z-index:2;
background:none;
}
button:active::after{
z-index:1;
background-color: #0070c9;
}
<button><span>Button</span></button>
Here is a fiddle demonstrating my problem: JSFiddle
I'm making a custom drop down (in reality I'm using an icomoon icon instead of the V)... it looks nice, but the ::after for the parent element is blocking the select :(
<div class="select-style">
<select>
<option value="">...</option>
<option value="1365">Some term</option>";
</select>
</div>
CSS
.select-style {
width: 240px;
height: 26px;
border: 0;
padding: 0;
margin: 0;
position: relative;
&::after {
/*content: "\f107";
font-family: "icomoon";*/
content: "V";
font-size: 18px;
position: absolute;
right: 7px;
top: 0;
}
}
select {
width: 100%;
height: 24px;
border: 1px solid rgb(199, 199, 199);
border-radius: 3px;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: "";
&::-ms-expand {
display: none;
}
}
I've looked into having JS open the drop down, but found out that doesn't work. I've even tried using z-index to see if that would help... but for some reason the icon gets hidden even though the select has a transparent background.
How can I make it so that the custom icon is visible over the select but does not block my select from being clicked?
Add position:relative and z-index:1 to the select itself
https://jsfiddle.net/hbpqvkqL/
select {
...
position: relative;
z-index: 1;
}
yopu can set the ::after to have z-index: -1;
.select-style {
width: 240px;
height: 26px;
border: 0;
padding: 0;
margin: 0;
position: relative;
&::after {
/*content: "\f107";
font-family: "icomoon";*/
content: "V";
font-size: 18px;
position: absolute;
right: 7px;
top: 0;
z-index: -1;
}
}
I have a button with a background color, and text color set. What I like to do, is when the user hover the mouse on the button, the background to animate from bottom to top and change the color of the text to the color of the background.
For terms of simplicity of the code, I didn't put the transient I like to apply on the CSS properties. I know it's much easyer to change the button background code, but I plan to use transient for changing the :before height on hover.
So I have the following code, but when I hover the mouse on the button, the :before overlapping my button text.
I have also try to play with the z-index but no luck. Do you think is there any solution to this problem ?
body {
background: #111;
}
.btn {
color: #FFF;
background: #333;
border: none;
font-size: 18px;
font-weight: bold;
padding: 18px 60px;
position: relative;
}
.btn:before {
display: block;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #FFF;
}
.btn:hover {
color: #333;
}
.btn:hover:before {
height: 100%;
}
<br />
Do Stuff
You need to add additional <span> element which would stay above the ::before pseudoelement:
span {
position: relative;
z-index: 1;
}
fiddle
The effect you desire can also be achieved without adding the additional span. By utilising the before and after pseudo elements for background colours and positioning them correctly.
To position the pseudo elements behind the text, set a positive z-index on the element and a negative z-index on the pseudo-element.
.btn {z-index: 1}
.btn:before {z-index: -1;}
Reference this article by Nicolas Gallagher which explains in more detail, see section 'Pseudo background-position' http://nicolasgallagher.com/an-introduction-to-css-pseudo-element-hacks/.
Also see fiddle with it in action: https://jsfiddle.net/j9whmcmz/2/
This technique does not work if you apply a background color to the .btn itself.
Choose your poison I guess, both solutions do the trick.
Try this:
body {
background: #333;
}
.btn {
color: #FFF;
background: #333;
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
}
.btn span {
display: inline-block;
padding: 18px 60px;
border: none;
font-size: 18px;
font-weight: bold;
z-index: 10;
position: relative;
}
.btn:after {
display: block;
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 0;
background: #FFF;
height: 100%;
z-index: 9;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.btn:hover {
color: #333;
}
.btn:hover:after {
max-height: 100%;
top: 0;
}
<span>Do Stuff</span>
Solution if pretty obvious - content of the button should be also absolute positioned. Then browser order them properly behind each other.
EDIT: Maybe my formatting and styling is not the best for the case, but it was quick update of your code to get the idea
body {
background: #111;
}
.btn {
color: #FFF;
background: #333;
border: none;
font-size: 18px;
font-weight: bold;
padding: 18px 60px;
position: relative;
}
.btn span {
display: block;
content: '';
position: absolute;
top: 18px;
left: 0px;
width: 100%;
text-align: center;
}
.btn:before {
display: block;
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: #FFF;
}
.btn:hover {
color: #333;
}
.btn:hover:before {
height: 100%;
}
<br />
<span>Do Stuff</span>
I am trying to style the up and down button of the input field number on FF. I have successfully achieved this on chrome with the below code but I can't find any CSS trick to do it on FF.
I can't use JS to do this.
Is it possible to style the up and down using CSS in FF? if so how? - I only need to achieve this on the latest version
DOM
<div class="productQty">
<span></span>
<input type="number" max="10" min="1" class="mod"/>
</div>
CSS
input[type="number"] {
height: 30px;
width: 60px;
font-size: 18px;
position: relative;
background-color: transparent;
border: none;
-moz-appearance: textfield;
}
.productQty span {
display: block;
width: 41px;
height: 30px;
background: white;
z-index: -1;
position: absolute;
top: 0;
left: 0;
bottom: 0;
border: solid 1px #999999;
}
/* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button,
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background: transparent url("../img/updown.png") no-repeat center center;
width: 16px;
height: 100%;
opacity: 1; /* shows Spin Buttons per default (Chrome >= 39) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
input[type="number"].mod::-moz-inner-spin-button:hover,
input[type="number"].mod::-moz-inner-spin-button:active{
border: none;
}
/* Override browser form filling */
input:-webkit-autofill {
background: black;
color: red;
}
How does it look on chrome and how it should look
How does it looks in FF 38
You can't directly apply css to the buttons on FF, there is a bugreport about it:
https://bugzilla.mozilla.org/show_bug.cgi?id=1108469
If you don't mind to apply some css to the containing element, you could use the :before and :after to overlay custom buttons.
div:before, div:after {
display: block;
position: absolute;
width: 14px;
height: 8px;
line-height: 8px;
background-color: #ccc;
left: 136px;
z-index: 1;
font-size: 9px;
text-align: center;
pointer-events: none;
}
div:before {
content: "+";
top: 11px;
}
div:after {
content: "-";
top: 20px;
}
<div><input type="number" /></div>