Splitting one Div into two css sections?

Splitting one Div into two css sections? - javascript

I would like some help in getting my css working.
Now what I would like to do is make a shadow appear on a div when the user starts to scroll.
At the moment I have.
HTML
<div class="head shadow"></div>
CSS
.head {
background: #edeff0;
position: fixed;
width: 70%;
height: 70px;
top: 0;
left: 85px;
right: 15px;
z-index: 100;
}
.shadow {
display:none;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
Javascript
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1) {
$('.shadow').fadeIn();
} else {
$('.shadow').fadeOut();
}
});
Now if I remove
display:none;
everything will show, and if I put it back it will hide everything.
How can I get it to only hide the shadows and make the javascript work.
Here is a working (well it's not working) version
Thanks
Aled

WORKING FIDDLE - http://jsfiddle.net/andyjh07/yY4U8/
HTML:
<div class="head"></div>
jQuery:
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1) {
$('.head').addClass('shadow');
} else {
$('.head').removeClass('shadow');
}
});
CSS:
.shadow {
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
The above solution adds the class of shadow to the element with the class of head if the scroll is true, else it will remove it. The reason you were having issues before is because you were using display: none; which will completely hide the entire element, not JUST the styling for that class

Here is the Working Fiddle
(Please do not forget to include jquery)
HTML
<div class="head"></div>
CSS
.head {
background: #edeff0;
position: fixed;
width: 70%;
height: 70px;
top: 0;
left: 85px;
right: 15px;
z-index: 100;
}
.shadow {
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
Jquery
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 1) {
$('.head').addClass("shadow");
} else {
$('.head').removeClass("shadow");
}
});

.shadow {
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-property: all
-moz-transition-property: all
-ms-transition-property: all
-o-transition-property: all
transition-property: all
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0);
}
.shadow.scrolled {
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
$(document).scroll(function () {
if ($(this).scrollTop() > 0) {
$('.shadow').addClass("scrolled");
} else {
$('.shadow').removeClass("scrolled");
}
});

Related

I'm trying to figure out how to read the state/value of a slider switch that will react when moved

I've created a sliding switch that will hide or display parts of a large form. The HTML has the following code:
<fieldset class="group">
<legend>
<h1>Form Type</h1>
</legend>
<label class="switch switch-left-right">
<input class="switch-input" type="checkbox" id="formSwitch">
<span class="switch-label" data-on="Progress" data-off="Diagnostic"></span>
<span class="switch-handle"></span>
</label>
</fieldset>
The CSS behind it is the following:
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-left-right .switch-label {
overflow: hidden;
}
.switch-left-right .switch-label:before, .switch-left-right .switch-label:after {
width: 20px;
height: 20px;
top: 4px;
left: 0;
right: 0;
bottom: 0;
padding: 11px 0 0 0;
text-indent: -45px;
border-radius: 20px;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-left-right .switch-label:before {
background: #FF7F50;
text-align: left;
padding-left: 80px;
}
.switch-left-right .switch-label:after {
text-align: left;
text-indent: 9px;
background: #FF7F50;
left: -100px;
opacity: 1;
width: 100%;
}
.switch-left-right .switch-input:checked ~ .switch-label:before {
opacity: 1;
left: 90px;
}
.switch-left-right .switch-input:checked ~ .switch-label:after {
left: 0;
}
.switch-left-right .switch-input:checked ~ .switch-label {
background: inherit;
}
I'm trying to set it up so that when the switch is on Diagnostic, it will unhide a group of form fields and if it's on progress it will hide the same form fields. I've tried event listeners and onclick listeners and couldn't seem to get anything working. I just need to get it as far as "if it's in one position, do this" and "if it's in the other position, do that"
This doesn't seem like it would be a challenge, but its proving to be one!

You just need to listen to "change" on the checkbox. Then you can use the element.checked property to set classes or inline-styling as I am doing in my example below
document.querySelector("#formSwitch").addEventListener("change", e => {
const hidden = document.querySelector("#hidden")
hidden.style.display = e.target.checked ? "none" : "block";
})
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing:content-box;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing:content-box;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
box-sizing:content-box;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-left-right .switch-label {
overflow: hidden;
}
.switch-left-right .switch-label:before, .switch-left-right .switch-label:after {
width: 20px;
height: 20px;
top: 4px;
left: 0;
right: 0;
bottom: 0;
padding: 11px 0 0 0;
text-indent: -45px;
border-radius: 20px;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-left-right .switch-label:before {
background: #FF7F50;
text-align: left;
padding-left: 80px;
}
.switch-left-right .switch-label:after {
text-align: left;
text-indent: 9px;
background: #FF7F50;
left: -100px;
opacity: 1;
width: 100%;
}
.switch-left-right .switch-input:checked ~ .switch-label:before {
opacity: 1;
left: 90px;
}
.switch-left-right .switch-input:checked ~ .switch-label:after {
left: 0;
}
.switch-left-right .switch-input:checked ~ .switch-label {
background: inherit;
}
<fieldset class="group">
<legend>
<h1>Form Type</h1>
</legend>
<label class="switch switch-left-right">
<input class="switch-input" type="checkbox" id="formSwitch">
<span class="switch-label" data-on="Progress" data-off="Diagnostic"></span>
<span class="switch-handle"></span>
</label>
</fieldset>
<div id="hidden">
stuff that needs to be shown / hidden
</div>

How to Show Tooltip by default without hovering in pure css

I have the below tooltip which will work when we hover the div element,
I need to show the tooltip by default when refresh the page.
How can I achieve it in pure css? I don't need any javascript stuff here. Any idea to make it work with only css?
I tried removing display: block; from tooltip:before but none of them worked.
.toolwrapper {
color: #555;
cursor: help;
font-family: Arial;
font-size: 12px;
margin: 40px 64px 9px 4px;
padding: 15px 20px;
position: relative;
text-align: center;
width: 100%;
}
.toolwrapper .tooltip {
background: #424242;
bottom: 100%;
color: #fff;
display: block;
left: 0;
opacity: 0;
padding: 10px;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.toolwrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.toolwrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #424242 10px;
bottom: -10px;
content: " ";
height: 0;
left: 80%;
margin-left: -13px;
position: absolute;
width: 0;
}
.toolwrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
<div class="toolwrapper">
Hover me to show tooltip
<div class="tooltip">Hi I'm tooltip</div>
</div>

You just need to change your opacity from 0 to 1 on the tooltip class itself, as setting it to 0 is what is making it invisible.
.toolwrapper .tooltip {
opacity: 1;
}

Add opacity: 1 in tooltip
.toolwrapper {
color: #555;
cursor: help;
font-family: Arial;
font-size: 12px;
margin: 40px 64px 9px 4px;
padding: 15px 20px;
position: relative;
text-align: center;
width: 100%;
}
.toolwrapper .tooltip {
background: #424242;
bottom: 100%;
color: #fff;
display: block;
left: 0;
opacity: 1 !important;
padding: 10px;
pointer-events: none;
position: absolute;
width: 100%;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.toolwrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.toolwrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #424242 10px;
bottom: -10px;
content: " ";
height: 0;
left: 80%;
margin-left: -13px;
position: absolute;
width: 0;
}
.toolwrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
<div class="toolwrapper">
Hover me to show tooltip
<div class="tooltip">Hi I'm tooltip</div>
</div>

Button that switches DIV content

I'm creating something for a pricing table that needs to be able to convert between Pounds and Dollars, I have the base of this down, with a sliding mechanic, unfortunately you're able to click "Sterling" more than once to produce the function of it converting between both prices, i'm wondering how I can make it so that it can only perform the function once, to get rid of this issue
var shown = 'sterling';
function swap() {
if (shown === 'sterling') {
document.getElementById('dollars-1').style.display = "inline-block";
document.getElementById('dollars-2').style.display = "inline-block";
document.getElementById('dollars-3').style.display = "inline-block";
document.getElementById('sterling-1').style.display = "none";
document.getElementById('sterling-2').style.display = "none";
document.getElementById('sterling-3').style.display = "none";
shown = 'dollars';
} else {
document.getElementById('sterling-1').style.display = "inline-block";
document.getElementById('sterling-2').style.display = "inline-block";
document.getElementById('sterling-3').style.display = "inline-block";
document.getElementById('dollars-1').style.display = "none";
document.getElementById('dollars-2').style.display = "none";
document.getElementById('dollars-3').style.display = "none";
shown = 'sterling';
}
};
body {
background-color: #707070;
}
.switch {
position: relative;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked+.switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked+.switch-label-on~.switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #65bd63;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(to bottom, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off" id="swap" onclick="swap()">Sterling</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on" id="swap" onclick="swap()">Dollars</label>
<span class="switch-selection"></span>
</div>
Any help would be appreciated!

Rather than keeping what is shown in a variable that you manually swap every time either option is clicked, pass the price type in to the swap function and then display what you want to based off of that. This way, they can click either button as many times as they like, but it will only change when the other option is clicked. I made the changes to your example.
function swap(priceType) {
if (priceType === 'dollars') {
document.getElementById('dollars-1').style.display = "inline-block";
document.getElementById('dollars-2').style.display = "inline-block";
document.getElementById('dollars-3').style.display = "inline-block";
document.getElementById('sterling-1').style.display = "none";
document.getElementById('sterling-2').style.display = "none";
document.getElementById('sterling-3').style.display = "none";
} else {
document.getElementById('sterling-1').style.display = "inline-block";
document.getElementById('sterling-2').style.display = "inline-block";
document.getElementById('sterling-3').style.display = "inline-block";
document.getElementById('dollars-1').style.display = "none";
document.getElementById('dollars-2').style.display = "none";
document.getElementById('dollars-3').style.display = "none";
}
};
body {
background-color: #707070;
}
.switch {
position: relative;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked+.switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked+.switch-label-on~.switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #65bd63;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(to bottom, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off" id="swap" onclick="swap('sterling')">Sterling</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on" id="swap" onclick="swap('dollars')">Dollars</label>
<span class="switch-selection"></span>
</div>

Set the swap function as a callback for the change event of the radio buttons instead, so it will only be called once the state of the switch changes.
On a side note, it would be agood idea to give your radio buttons more meaningful names. "week" and "month" doesn't seem to make much sense here. ;-) And also, you are using the id="swap" twice, but IDs must be unique.
document.getElementById('currency_sterling').addEventListener('change', swap);
document.getElementById('currency_dollars').addEventListener('change', swap);
function swap(ev) {
if (ev.target.value === 'dollars') {
document.getElementById('dollars-1').style.display = "inline-block";
document.getElementById('dollars-2').style.display = "inline-block";
document.getElementById('dollars-3').style.display = "inline-block";
document.getElementById('sterling-1').style.display = "none";
document.getElementById('sterling-2').style.display = "none";
document.getElementById('sterling-3').style.display = "none";
} else {
document.getElementById('sterling-1').style.display = "inline-block";
document.getElementById('sterling-2').style.display = "inline-block";
document.getElementById('sterling-3').style.display = "inline-block";
document.getElementById('dollars-1').style.display = "none";
document.getElementById('dollars-2').style.display = "none";
document.getElementById('dollars-3').style.display = "none";
}
};
body {
background-color: #707070;
}
.switch {
position: relative;
height: 26px;
width: 120px;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch-input {
display: none;
}
.switch-input:checked+.switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
}
.switch-input:checked+.switch-label-on~.switch-selection {
left: 60px;
/* Note: left: 50% doesn't transition in WebKit */
}
.switch-selection {
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 58px;
height: 22px;
background: #65bd63;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(to bottom, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>
<div class="switch">
<input type="radio" class="switch-input" name="currency" value="sterling" id="currency_sterling" checked>
<label for="currency_sterling" class="switch-label switch-label-off">Sterling</label>
<input type="radio" class="switch-input" name="currency" value="dollars" id="currency_dollars">
<label for="currency_dollars" class="switch-label switch-label-on">Dollars</label>
<span class="switch-selection"></span>
</div>

Trigger event upon li click

I'm trying to trigger a function upon users clicking on the li elements in the example below but not having much luck outside of using onclick - i.e. clicking on the first li (value of 1) would ideally call a function where the value "1" is passed in.
Styled list control
..
<ul id='uItem'>
<li><a href="#" class="launch" >1</a></li>
<li>2</li>
...
https://jsfiddle.net/wL8vpuqt/5/

Working fiddle.
You've just to prevent default behavior by using event.preventDefault() :
$(document).ready(function() {
$('ul#uItem li').click(function(event) {
event.preventDefault();
alert($(this).text());
});
});
Hope this helps.
$(document).ready(function() {
$('ul#uItem li').click(function(e) {
e.preventDefault();
alert($(this).text());
});
});
/* line 81, ../sass/menu.scss */
.path-nav {
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
position: fixed;
}
/* line 87, ../sass/menu.scss */
.path-nav.path-nav-bottom-left {
bottom: 30%;
left: 20%;
position: absolute;
}
/* line 93, ../sass/menu.scss */
.path-nav.path-nav-top-right {
top: 26px;
right: 26px;
}
/* line 100, ../sass/menu.scss */
.path-nav a {
position: relative;
z-index: 1;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
border: 6px solid white;
background: #44403d;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 16px;
font-family: sans-serif;
text-decoration: none;
-moz-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
-o-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
}
/* line 127, ../sass/menu.scss */
.path-nav.active a {
-moz-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
-o-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 0 2px rgba(0, 0, 0, 0.8);
}
/* line 137, ../sass/menu.scss */
.path-nav ul {
position: absolute;
z-index: 0;
top: 8.5px;
left: 8.5px;
margin: 0;
padding: 0;
}
/* line 147, ../sass/menu.scss */
.path-nav li {
position: absolute;
z-index: 0;
display: block;
top: 0;
left: 0;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(1) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.175s;
-webkit-transition-delay: 0.175s;
-o-transition-delay: 0.175s;
transition-delay: 0.175s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(2) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.14s;
-webkit-transition-delay: 0.14s;
-o-transition-delay: 0.14s;
transition-delay: 0.14s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(3) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.105s;
-webkit-transition-delay: 0.105s;
-o-transition-delay: 0.105s;
transition-delay: 0.105s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(4) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.07s;
-webkit-transition-delay: 0.07s;
-o-transition-delay: 0.07s;
transition-delay: 0.07s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(5) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0.035s;
-webkit-transition-delay: 0.035s;
-o-transition-delay: 0.035s;
transition-delay: 0.035s;
}
/* line 155, ../sass/menu.scss */
.path-nav li:nth-child(6) {
-moz-transition-property: all;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition-delay: 0s;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
/* line 169, ../sass/menu.scss */
.path-nav:target li {
-moz-transform: rotate(1800deg);
-webkit-transform: rotate(1800deg);
-o-transform: rotate(1800deg);
-ms-transform: rotate(1800deg);
transform: rotate(1800deg);
}
/* line 174, ../sass/menu.scss */
.path-nav:target .cross {
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(1) {
top: -100px;
left: 80px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(2) {
top: -100px;
left: 150px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(3) {
top: -100px;
left: 220px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(4) {
top: -30px;
left: 80px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(5) {
top: -30px;
left: 150px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(6) {
top: -30px;
left: 220px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(7) {
top: 40px;
left: 80px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(8) {
top: 40px;
left: 150px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(9) {
top: 40px;
left: 220px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-bottom-left:target li:nth-child(10) {
top: 110px;
left: 150px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(1) {
top: 265px;
left: 0px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(2) {
top: 252px;
left: -82px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(3) {
top: 214px;
left: -156px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(4) {
top: 156px;
left: -214px;
}
/* line 73, ../sass/menu.scss */
.path-nav.path-nav-top-right:target li:nth-child(5) {
top: 82px;
left: -252px;
}
/* line 200, ../sass/menu.scss */
.path-nav .path-nav-expander,
.path-nav .path-nav-close {
z-index: 3;
width: 68px;
height: 68px;
line-height: 68px;
}
/* line 208, ../sass/menu.scss */
.path-nav .path-nav-close {
z-index: 2;
position: absolute;
top: 0;
left: 0;
background: none;
outline: red;
-moz-box-shadow: 0;
-webkit-box-shadow: 0;
-o-box-shadow: 0;
box-shadow: 0;
}
/* line 222, ../sass/menu.scss */
.path-nav:target .path-nav-expander {
z-index: 1;
}
/* line 228, ../sass/menu.scss */
.path-nav .path-nav-expander {
position: relative;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0fd2ab), color-stop(50%, #0fd2ab), color-stop(50%, #0fd2ab));
background: -webkit-linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
background: -moz-linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
background: -o-linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
background: -ms-linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
background: linear-gradient(#0fd2ab, #0fd2ab 50%, #0fd2ab 50%);
-moz-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.5);
-o-box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.5);
box-shadow: 0 0.2em 1em 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 2px 2px rgba(255, 255, 255, 0.5);
}
/* line 241, ../sass/menu.scss */
.path-nav .path-nav-expander .cross {
position: relative;
width: 68px;
height: 68px;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
/* line 249, ../sass/menu.scss */
.path-nav .path-nav-expander .cross .cross-h,
.path-nav .path-nav-expander .cross .cross-v {
position: absolute;
top: 50%;
left: 50%;
background: #fff;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
}
/* line 259, ../sass/menu.scss */
.path-nav .path-nav-expander .cross .cross-h {
width: 8px;
margin-left: -4px;
height: 40px;
margin-top: -20px;
}
/* line 267, ../sass/menu.scss */
.path-nav .path-nav-expander .cross .cross-v {
width: 40px;
margin-left: -20px;
height: 8px;
margin-top: -4px;
}
/* line 277, ../sass/menu.scss */
.path-nav-top-right .path-nav-expander {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #143da5), color-stop(50%, #133a9c), color-stop(50%, #103081));
background: -webkit-linear-gradient(#143da5, #133a9c 50%, #103081 50%);
background: -moz-linear-gradient(#143da5, #133a9c 50%, #103081 50%);
background: -o-linear-gradient(#143da5, #133a9c 50%, #103081 50%);
background: -ms-linear-gradient(#143da5, #133a9c 50%, #103081 50%);
background: linear-gradient(#143da5, #133a9c 50%, #103081 50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu" class="path-nav path-nav-bottom-left">
<a href="#menu" class="path-nav-expander">
<div class="cross">
<div class="cross-h"></div>
<div class="cross-v"></div>
</div>
</a>
<ul id='uItem'>
<li><a href="#" class="launch" >1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><a href="#" class="launch" o>10</a></li>
</ul>
</nav>

How do I remove a hover effect if the Element has focus?

I am trying to add hover and focus effects to my input boxes.
On hover the box outline will be GREEN.
On focus the box outline will be BLUE.
Currently I hit a bump where if the input box has focus, it turns BLUE, but if I hover over it, it turns GREEN.
I want to prevent the box from initiating the 'hover' effect if the box has focus.
CSS:
input[type=text],
textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
input[type=text]:hover,
textarea:hover {
box-shadow: 0 0 5px rgba(46, 255, 138, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(46, 255, 138, 1);
}
How can I prevent the hover effect from executing while the input box has a focus?
Thanks!

The effects take precedence in the order you place them, so if you put them like this, it should work
input[type=text],
textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:hover,
textarea:hover {
box-shadow: 0 0 5px rgba(46, 255, 138, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(46, 255, 138, 1);
}
input[type=text]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}

We Keep Coding

JavaScript is the programming language of the Web.

Splitting one Div into two css sections? - javascript

Related

I'm trying to figure out how to read the state/value of a slider switch that will react when moved

How to Show Tooltip by default without hovering in pure css

Button that switches DIV content

Trigger event upon li click

How do I remove a hover effect if the Element has focus?

Categories

Resources