this is fast, I have a menu that I am trying to animate with the :hover event, the menu is on a navbar and what I am trying to accomplish is the same behavior as Twitter navbar, once you hover the links, a border bottom appears, in my case is a box-shadow but it doesn't matter. As you see in the example, there is an animation once the user hover the links and I want the same animation when the user leaves
See here my codepen
and here my css
.capilleira-navbar{
background: white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
a {
color: getColor(night);
}
a:hover, a:focus {
background: getColor(snow) !important;
color: red;
box-shadow: inset 0px -4px 0px 0px red;
margin: 0px;
transition: all 0.4s ease-in-out;
}
img {
max-width:100px;
margin-top: -7px;
}
.navbar-nav {
margin-left: 30px;
}
.navbar-nav > li > a {
padding-left: 30px;
padding-right: 30px;
}
}
.one {
transition: all 0.4s ease-in-out;
}
.one:hover {
box-shadow: inset 0px -4px 0px 0px red;
transition: all 0.4s ease-in-out;
}
<div class="one">
Hover
</div>
This is because you have the transition in the 'a:hover' declaration and not the 'a' declaration. The 'a:hover' is only in effect whilst you are hovering over the element, once you move the mouse off, it doesn't apply anymore, hence why the transition doesn't have any effect then. If you move the transition to the 'a', it will work correctly as shown in this codepen
a {
color: getColor(night);
transition: all 0.4s ease-in-out;
}
a:hover, a:focus {
background: getColor(snow) !important;
color: red;
box-shadow: inset 0px -4px 0px 0px red;
margin: 0px;
}
Remove the transition in a:hover, a:focus and add this
a
{
transition: all 0.4s ease-in-out;
}
Related
trying to get my website to transition text-shadow on and off hover. When I use a transition without a specified property you can see font-size,color,etc transition. When specifying the text-shadow property in the transition no transition appears (currently using Chrome to test).
nav ul li a {
color: white;
transition: text-shadow 0.5s ease;
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
}
Are you sure you are not being deceived by the lightness of your color? I have amended your code and made it a workable snippet, and if I change the color to something more explicit, like red and yellow, you can actually see the effect. It's pretty feint, though. It seems like adding that property to the default does indeed work.
body {
background: black;
}
h1, h2 {
color: white;
text-shadow: 2px 2px 10px red;
transition: text-shadow 1s ease;
z-index: 1;
position: relative;
}
h2 {
text-shadow: 2px 2px 10px transparent;
}
h1:hover,
h2:hover {
text-shadow: 2px 2px 10px yellow;
}
<h1>Hover on me for text shadow!</h1>
<h2>Hover on me for text shadow!</h2>
You need to add shadow and transition in both declarations
Try this css code
nav ul li a {
color: white;
transition: 0.5s ease;
text-shadow: 2px 2px 10px rgba(255,255,255,0);
}
nav ul li a:hover {
color:grey;
text-shadow: 2px 2px 10px rgba(255,255,255,0.23);
transition: 0.5s ease;
}
In every other browser the :active selector works even if there are elements nested inside the anchor tag, but IE11 seems special. (Microsoft Edge is apparently fine).
I'd expect when I click on the anchor tag, even if I click on the span, that the active selector will be applied.
http://jsfiddle.net/91ejuvjm/4/
HTML
<span>Click here</span>
CSS
a
{
display: block;
background-color: red;
}
a:active
{
background-color: blue;
}
It's an anchor tag and according to the spec it can be active, but it's like the span tag captures the click. I tried adding pointer-events:none; to the span tag and it ignores it which is against the spec and obviously a bug. I also thought maybe it was being selected since it's text, but -ms-user-select: none; doesn't help. Am I missing something obvious? How do I make clicks ignore the span tag in IE11?
#FighterJet had the solution for me pointer-events: none; on the nested element allows for the parent to take the event (for ie)
.squishy span {
position: absolute;
/*######################
# THE IMPORTANT PART #
######################*/
/*pointer-events: none;*/
display: inline-block;
white-space: nowrap;
top: 0;
left: 0;
vertical-align: middle;
line-height: 75px; /*change to btn height*/
width: 100%;
height: 100%;
-webkit-transition: transfrom .15s;
-moz-transition: transfrom .15s;
-ms-transition: transfrom .15s;
transition: transfrom .15s;
}
/* The solution! */
.solution {
pointer-events: none;
}
.btn-1 {
width: 75px;
height: 75px;
border-radius: 50%;
}
.squishy {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 10px;
color: #fff;
text-align: center;
background: #333;
box-shadow: inset 5px 5px 15px rgba(150, 150, 150, .5), inset -5px -5px 15px rgba(0, 0, 0, .5), 3px 3px 5px rgba(0, 0, 0, .7);
-webkit-transition: box-shadow .15s;
-moz-transition: box-shadow .15s;
-ms-transition: box-shadow .15s;
transition: box-shadow .15s;
}
.squishy:active {
box-shadow: inset 1px 1px 1px rgba(150, 150, 150, .5), inset -1px -1px 1px rgba(0, 0, 0, .5), 1px 1px 1px rgba(0, 0, 0, .7);
}
.squishy:active span {
-webkit-transform: scale(.95);
transform: scale(.95);
}
<h1>Broken in IE</h1>
<a class="squishy btn-1" type="button">
<span>O</span>
</a>
<h1>Works in IE</h1>
<a class="squishy btn-1" type="button">
<span class="solution">O</span>
</a>
I ran into this problem while making buttons. Now they work properly in IE http://codepen.io/FluidOfInsanity/pen/XjpEag
IE11 doesn't allow block elements I guess to function that way.
http://jsfiddle.net/91ejuvjm/7/
span
{
display: inline-block;
}
Another example that's probably more complete: http://jsfiddle.net/91ejuvjm/8/
Was playing around and changed the span to inline-block and it's fine.
I would like a series of divs with no margin and both top and bottom box shadows such that the box shadows of each div do not overlap any other divs. I've constructed a jsfiddle to show what I'm trying to achieve and what I have now. This seems like something that z-index could be used for, but I'm not sure how.
Put all of your DIVs in one outer wrapper DIV. Apply a box shadow to that, and to the hover state of each internal DIV. Now each can be controlled independentaly.
<div class="outer">
<div class="inner">The box shadow from each div...</div>
<div class="inner">...should go under each other div.</div>
<div class="inner">The whole thing should look...</div>
<div class="inner">...like one big div with a shadow...</div>
<div class="inner">...unless you hover over one.</div>
</div>
div.outer {
background: #fff;
margin: 0px auto;
padding: 0px;
width: 300px;
cursor: pointer;
box-shadow: 0px 0px 3px #999;
transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out;
}
div.outer:hover {
box-shadow: none;
}
div.inner {
padding: 20px;
transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out;
}
div.inner:hover {
padding: 20px;
box-shadow: 0px 0px 5px #666;
margin-left: -20px
width: 350px;
}
I've styled this such that the box shadow on the outer DIV disappears when you hover over it, so only the hovered innerDIV shows a shadow. Adjust to taste :)
Fiddle:
https://jsfiddle.net/ehxsdjr8/7/
Are you looking for something like this?
Fiddle
$( 'div' ).hover(
function() {
$(this).addClass( "hey" );
$('div').not(this).addClass( "heyho" );
}, function() {
$(this).removeClass( "hey" );
$('div').not(this).removeClass( "heyho" );
}
);
div {
background: #fff;
margin: 0px auto;
padding: 15px;
width: 300px;
cursor: pointer;
box-shadow: 0px 0px 3px #999;
transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out;
}
.hey{
padding: 20px;
box-shadow: 0px 0px 5px #666;
margin: 15px auto;
width: 350px;
}
.heyho {
box-shadow: 0px 0px 5px #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>The box shadow from each div...</div>
<div>...should go under each other div.</div>
<div>The whole thing should look...</div>
<div>...like one big div with a shadow...</div>
<div>...unless you hover over one.</div>
https://jsfiddle.net/ehxsdjr8/13
The trick here is to add multiple shadows to each div and turn them on/off as needed. In this case, add the top shadow for the first element and the first element after a hover only and modify the existing shadow to not go above the element.
div {
background: #fff;
margin: 0px auto;
padding: 15px;
width: 300px;
cursor: pointer;
box-shadow: 0px 3px 3px #999;
transition:
padding .1s ease-in-out,
width .1s ease-in-out,
box-shadow .1s ease-in-out;
}
div:hover {
padding: 20px;
box-shadow: 0px 0px 5px #666;
margin: 15px auto;
width: 350px;
}
div:hover + div {
box-shadow: 0px 3px 3px #999, 0px -3px 3px #999;
}
div:first-of-type {
box-shadow: 0px 3px 3px #999, 0px -3px 3px #999;
}
div:first-of-type:hover {
box-shadow: 0px 0px 5px #666;
}
It'll take a lot of playing around to get this to look right.
I am creating a website for a client and would like to remove the blue "shadow" on the dropdown menus. i think the code i must edit is as follows:
.main_nav ul.sub-menu {
position: absolute;
top: 65px;
width: auto;
min-width: 150px;
z-index: 9999;
list-style-type: none;
float: right;
left: 0;
display: none;
visibility: hidden;
height: 0;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
can you please assist me in this matter.
http://makeskate.wpengine.com/
Just delete this from your css codes :
.main_nav li:hover a, .link-active, .current-menu-item a {
box-shadow: 0px -5px 0px rgba(255, 255, 255, 0.3) inset, 0px 2px 0px rgba(255, 255, 255, 0.2) inset;
}
And delete background from here :
.skill_set, .soft_skill span, .submit_button, .main_nav li:hover a, .link-active, .current-menu-item a, .main_nav ul.sub-menu, .button, #submit, .wpcf7-submit, .post .date, .tags a, .entry-footer li a:hover, .post-content .wp-caption, .comment .comment-meta .comment-reply-link:hover, #searchsubmit {
background: none repeat scroll 0% 0% #34799E;
}
Add box-shadow:none to your .main_nav li:hover a styles
.main_nav li:hover a, .link-active, .current-menu-item a{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
If you want to remove the blue background color, then use the below style
.main_nav li:hover a, .link-active, .current-menu-item a{
background-color: rgba(255,255,255,0); // to remove the blue background and add transparent background
}
I am working here http://tinyurl.com/a74ko2o , this is an ecommerce store , powered by wordpress and my issue is in single product page , css designing in this link page , you guys can see thumbnails under the big image on hover thumbnails shows solid red border
I add this effect, but now, the problem is when it hovered , the image's moving down , and not fixed. i need it to be fixed , exact as this website http://emporium.premiumcoding.com/demo.php
css here for thumbnails
.leftcontentsp .thumbnails img {
border: 4px solid #343434;
height: 92px;
margin: 5px 4px 8px 0;
width: 92px;
}
on hover
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 5px solid #d00000;
}
please help to fix up this css issue , thanks in advance
The problem is because adding a 5px wide border after a 4px wide you get a 1px difference that moves the image down. We can fix this my adding and removing a padding, so the image stays in place:
.leftcontentsp .thumbnails img {
border: 4px solid #343434;
height: 92px;
margin: 5px 4px 8px 0;
width: 92px;
padding: 1px;
}
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 5px solid #d00000;
padding: 0;
}
Or if it's a mistake, just make the border the same wide on :hover as on the normal.
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 4px solid #d00000;
}
see the difference men
give same border width
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 4px solid #d00000;
}
as in natural state
1px disturbing
and this is for
transition on hover
.leftcontentsp .thumbnails img:hover, .product_list_widget li img:hover {
border: 4px solid #d00000;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}