Why css animation is not working in my code. When i want to hover my link.
.floridabt-nav .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
background-color: transparent;
color: #f9dd04;
transition: all 0.3s ease;
}
.floridabt-nav .dropdown-menu>li>a:focus:before, .dropdown-menu>li>a:hover:before{
content: "\2192";
color: #222222;
padding-right: 10px;
-moz-transition: padding-right .3s ease-in;
-o-transition: padding-right .3s ease-in;
-webkit-transition: padding-right .3s ease-in;
transition: padding-right .3s ease-in;
}
Look at the snippet. Now the transition works.
ul was missing in the selector
first css rule need of any declaration of padding
you have to put the transition declaration into the first rule (not under hover or focus)
in the second css rule you have to use padding and not padding-right
in the second css rule you don't need of transition declaration
I hope I was of any help.
.floridabt-nav .dropdown-menu>ul>li>a, .dropdown-menu>ul>li>a{
background-color: transparent;
color: #f9dd04;
-moz-transition: padding 0.3s ease-in;
-o-transition: padding 0.3s ease-in;
-webkit-transition: padding 0.3s ease-in;
transition: padding 0.3s ease-in;
padding: inherit;
}
.floridabt-nav .dropdown-menu>ul>li>a:focus, .dropdown-menu>ul>li>a:hover{
color: #222222;
padding: 10px;
}
<div class="floridabt-nav">
<div class="dropdown-menu">
<ul>
<li>
PADDING TRANSITION
</li>
</ul>
</div>
</div>
Related
I am trying to change the colour of an h2 tag inside a div.
The other elements inside this div change to white colour when hovered over, only the h2 does not change colour.
I know I can change this in CSS... .well.sb:hover, .well.sb:hover h2, but the bad thing with that is that the h2 part changes colour separately from the rest. When hovering over the whole thing, everything (including h2) should change text-color into white at the same time and at the same speed and for the same one big and only div section. How to make that work?
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
-moz-transition: .9s ease;
-webkit-transition: .9s ease;
-o-transition: .9s ease;
-ms-transition: .9s ease;
transition: .9s ease;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<div class="well sb"><div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div></div>
There are 2 things happening. First, you need to target the h2 more specifically (it's overriding your hover styles). Second, you have conflicting transitions.
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
/* -moz-transition: .9s ease;
-webkit-transition: .9s ease;
-o-transition: .9s ease;
-ms-transition: .9s ease;
transition: .9s ease; */
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.well.sb:hover h2.title-article-sidebar {
color: #FFF;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<div class="well sb"><div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div></div>
Just remove color: #444; from h2.title-article-sidebar
Recent version of chrome tend to add transitions in nested elements (not sure about it is a bug or a feature).
Just make sure that children don't have an inherited transition
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
-moz-transition: .9s ease;
-webkit-transition: .9s ease;
-o-transition: .9s ease;
-ms-transition: .9s ease;
transition: .9s ease;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
.sb * {
transition: 0s;
}
<div class="well sb">
<div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div>
</div>
This will solve it:
h2.title-article-sidebar {
font-size: 14px;
font-family: Calibri;
/* color: #444;*/
font-weight: 700;
line-height: 1.25em;
margin-top: 0;
}
.article-image-summary-sidebar {
border: 0 solid;
padding-bottom: 0;
}
.well.sb:hover {
color: #FFF;
background-color: #A10000;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}
<div class="well sb"><div>
<div class="article-image-summary-sidebar">
<img alt="X" src="http://loremxpixel.com/200/200">
<div class="article-date-summary-sidebar">
20-November-2010
</div>
<div class="article-tag-summary-sidebar">
TAG
</div>
<h2 class="title-article-sidebar">
TITLE WITH H2 TAG!!!!
</h2>
</div>
</div></div>
You don't have any problem in your animation as mentioned in some other answers. You have correctly written your code nor there is any specificity problem.
I am attaching a codepen link on which I was trying to solve your problem:
http://codepen.io/Sky-123/pen/mALGQZ
The animations remains intact as you have written them. The only change that I did was added the color:#444 to h2 tag through an inline statement and then removed it on hover in jQuery as it was causing concerns in animation..
Hope it solves your problem.
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
I am trying to make it so that so that a hover effect will apply for both a listed item tag and an anchor tag that it is nested in. Ideally I want it so that all the CSS is on one tag instead of split into two. I want the hover effect of the anchor tag to animate when the listed element tag is triggered. I'm assuming the solution would be to merge the styles into one but I don't know how to do it.
HTML:
<ul class="nav">
<li>
CONTACT
</li>
<li>
ABOUT
</li>
<li>
PORTFOLIO
</li>
</ul>
CSS:
body{
background: #000;
}
ul{
list-style-type:none;
display: inline-block;
}
.nav{
float:right;
list-style-type:none;
overflow: hidden;
}
.nav li{
float:right;
overflow: hidden;
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px;
margin-left: 10px;
text-align: center;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.nav li:hover{
background:#00bff3;
color:#000000;
}
.blue{
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.blue:hover{
color:#000000;
}
http://jsfiddle.net/2gbu5yrz/
It's easy enough to move the relevant styles to the links themselves (really where they should be anyhow):
http://codepen.io/pageaffairs/pen/PwNeEO
.blue{
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
display: block;
text-align: center;
padding: 8px;
}
.blue:hover{
color:#000000;
background:#00bff3;
}
Maybe this is what you are looking for: Replace .blue:hover with .nav li:hover .blue.
http://jsfiddle.net/p0ahhp5c/
The solution is to make your a use block display style:
.blue{
display: block;
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
Try this
.nav:hover .blue:hover {
/*your code here*/
}
When I use the Transition on a css element the things below it move. Here is an example on JSFiddle:
http://jsfiddle.net/pgdxd7su/ (Look at the JSFiddle one. The code snippet seems not to work)
h1{
font-size
}
h1:hover{
display: inline;
font-size: 3em;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
<!DOCTYPE html>
<body>
<h1>Hello</h1>
<hr>
</body>
Would there be a way to fix this and keep the hr from moving?
well, the easy cross-browser answer is to change your HTML markup to this:
<div id="h1box">
<h1>Hello</h1>
</div>
and then you can use your CSS like this:
#h1box {
position:relative;
height:80px;
border-bottom:1px solid #333;
}
h1 {
position:absolute;
top:5px left:5px;
}
h1:hover {
display: inline;
font-size: 3em;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
Basically we're getting rid of the difference between browser renderings of hr element, using more simple and easily to adapt elements like div, then removing the flow of elements by applying a position:absolute to the h1 element so the animation won't affect anything below it. Easy and cross-browser solution that will look teh same in every browser.
See fiddle here
I suppose what you need to fix is just the bad animation on hover,
perhaps this is what you want: Fiddle
your animation looks bad because you declare display: inline; inside the :hover and not in the main element itself, which will make the default display: block; from the <h1> changed to display: inline; only when it's hovered. It's jumping up and down because an inline element can't have a margin which <h1> on default, so the what you need to avoid the bad animation is either change your style to one of this
h1 {
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
h1:hover {
font-size: 3em;
}
this will keep the default block element of the <h1>
h1 {
display: inline;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
h1:hover {
font-size: 3em;
}
this will change the default block element of the <h1> to inline
h1 {
margin: 0;
-webkit-transition: font-size .2s linear;
-moz-transition: font-size .2s linear;
-ms-transition: font-size .2s linear;
-o-transition: font-size .2s linear;
transition: font-size .2s linear;
}
h1:hover {
display: inline;
font-size: 3em;
}
this will change the default block element of the <h1> to inline on hover, but removing the default margin which makes it jumpy (this will result the same with the second one)
i have a problem, HTML elements are moving while animation, i have captured 2 pics to guess what i want...
Before animation:
http://i031.radikal.ru/1406/9a/41e9b81ddaed.png
After animation:
http://i057.radikal.ru/1406/1b/c5e3f763fd98.png
all i want is, that after "transition", elements stay on their line...
Here is some HTML and CSS code
HTML
<div id="sliderdiv">
<ul>
<li>
<div id="bullets">
<div class="bullet" id="bul1"></div>
<div class="bullet" id="bul2"></div>
<div class="bullet" id="bul3"></div>
<div class="bullet" id="bul4"></div>
<div class="bullet" id="bul5"></div>
</div>
</li>
<li>
<div id="sliderimages">
<img src="sliderimages/bilberry.png">
<img src="sliderimages/dogrose.png">
<img src="sliderimages/dryedbilberry.png">
<img src="sliderimages/dryeddogrose.png">
<img src="sliderimages/dryedherbs.png">
<img src="sliderimages/wildapple.png">
</div>
</li>
<li>
<div id="arrows">
<div id="slideup"></div>
<div id="slidedown"></div>
</div>
</li>
</ul>
CSS
#sliderdiv{
text-align: center;
padding-top: 40px;
height: 771px;
width: 100%;
}
#sliderimages{
overflow: hidden;
text-align: center;
height: 771px;
width: 1187px;
}
#sliderdiv ul li{
list-style: none;
display: inline-block;
}
#arrows{
width: 26px;
margin-left: 5px;
}
#slideup{
margin-bottom: 10px;
}
#slideup{
cursor: pointer;
width: 26px;
height: 18px;
background-image: url('slideup.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
#slideup:hover{
background-image: url('slideuph.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
#slidedown{
cursor: pointer;
overflow: hidden;
margin-bottom: 380px;
width: 26px;
height: 18px;
background-image: url('slidedown.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
#slidedown:hover{
background-image: url('slidedownh.png');
-webkit-transition: background-image 0.5s ease-in-out;
-moz-transition: background-image 0.5s ease-in-out;
-ms-transition: background-image 0.5s ease-in-out;
-o-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
.bullet{
position: relative;
background-color: #747474;
width: 10px;
height: 10px;
margin-bottom: 15px;
border-radius: 30px;
border: none;
-webkit-transition: background-color, border 0.2s ease-in-out;
-moz-transition: background-color, border 0.2s ease-in-out;
-ms-transition: background-color, border 0.2s ease-in-out;
-o-transition: background-color, border 0.2s ease-in-out;
transition: background-color, border 0.2s ease-in-out;
}
.bullet:last-child{
margin-bottom: 350px;
}
.bullet:hover{
border-left: 5px;
border: solid 5px #747474;
background-color: #eeeeee;
-webkit-transition: background-color, border 0.2s ease-in-out;
-moz-transition: background-color, border 0.2s ease-in-out;
-ms-transition: background-color, border 0.2s ease-in-out;
-o-transition: background-color, border 0.2s ease-in-out;
transition: background-color, border 0.2s ease-in-out;
}
.bullet:last-child:hover{
margin-bottom: 350px;
}
#bullets{
margin-right: 10px;
}
You can set initial value for border property to 5px solid #FFFFFF to .bullet selector. Assuming here color #FFFFFF is the background color of your page (so it looks transparent).
And when hovering over the bullets replace border shorthand property with single longhand property border-color: #747474; inside the pseudo selector :hover, while border-width and border-style will be inherited from the initial border value 5px and solid
DEMO
Try adding this to your classes:
.bullet{
position: relative;
}
.bullet:hover{
right: 5px;
top: -5px;
margin-bottom: 5px;
}
I cant get this transition working in IE or Firefox, It looks fine in Safari and Chrome.
The opacity shows but is instant.
To me the below CSS looks right and I can't see any reason that it would work in either IE or firefox.
I've tried this using -ms-transition and it yields the same results, but the site uses CSS3 anyway so shouldn't need the -ms- anyway from what I've read.
Any light that can be shed would be greatly appreciated!
Ben
CSS:
.XMABAN {
height: 153px;
width: 230px;
background-color:rgb(127,0,25);
padding: 0;
vertical-align: top;
}
.XMABAN a {
height: 153px;
width: 230px;
text-decoration:none;
}
.XMABAN a:hover {
text-decoration:none;
}
.XMABAN img {
opacity: 1;
transition: opacity 0.70s ease-in-out;
-moz-transition: opacity 0.70s ease-in-out;
-webkit-transition: opacity 0.70s ease-in-out;
-o-transition: opacity 0.70s ease-in-out;
}
.XMABAN a:hover img {
opacity: 0.30;
transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out;
}
.XMABAN span {
position: relative;
left: 0%;
top: -62%;
font-weight:bold;
font-size:20pt;
color:#404040;
transition: color 0.70s ease-in-out;
-moz-transition: color 0.70s ease-in-out;
-webkit-transition: color 0.70s ease-in-out;
-o-transition: color 0.70s ease-in-out;
}
.XMABAN a:hover span {
color:#FFF0F5;
transition: color 0.25s ease-in-out;
-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
-o-transition: color 0.25s ease-in-out;
}
HTML:
<tr>
<td style="width: 33%;">
<div class="XMABAN" style="margin: 10px 0px 5px 0px;">
<a class="DSPI" href="online.asp">
<img src="../images/PRM_220.jpg">
<span>TEXT</span>
</a>
</div>
</td>
</tr>
CSS Transitions are not supported in IE9 or lower. They are supported in IE10, however, and the CSS you've included does work correctly in IE10.
I can only assume you're using IE10 with IE9 standards to test this, which is why the transition isn't working. To change this, simply set IE's Document Mode to Standards:
It's also worth noting that you should always include vendor prefixing before the intended CSS property. Specifying transition before -webkit-transition, for instance, will tell WebKit-based browsers to use the prefixed version instead of the actual version, and there may be differences in how each are handled. Change your CSS to:
-moz-transition: ...;
-webkit-transition: ...;
-o-transition: ...;
transition: ...;