Develop Reference

Css Transition doesn't work for the content. Its applied to the button but not to the content. The content doesn't hide/show smoothly [duplicate]

I'm having an issue which seems to be preventing CSS transitions from playing on an element which is simultaneously changing from display:none.
In the following example, the divs have identical CSS, except that hovering over the first one hides the other two. The second div is hidden using visibility:hidden, and the third is hidden using display:none.
When you mouse over the first div, the behaviour is as expected: the first div transitions and the other two are hidden. When you mouse out, the behaviour is different from what I would expect: the first div transitions back to normal, the second div is unhidden then transitions back to normal, but the third div is unhidden and still in the normal state.
I was expecting for the third div to match the behaviour of the second and also be unhidden, then transition back to normal.
div{
width:100px;
height:50px;
background:red;
border-radius:50%;
transition: border-radius 1s;
}
#hover:hover, #hover:hover ~ div{
border-radius:0%;
}
#hover:hover ~ #hide1{
visibility:hidden;
}
#hover:hover ~ #hide2{
display:none;
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>
Since the second div works as expected, it's fairly easy to come up with alternate solutions using visibility:hidden and some positioning CSS, but is it possible to accomplish this in just CSS using display:none? If not, why does display:none affect other transitions in this way?
Note: This seems like something that would be easy to find, but my searches only turned up questions about attempting to transition the display property itself, not its side-effects on other transitions.

A simple explanation of display: none:
Turns off the display of an element (it has no effect on layout); all
descendant elements also have their display turned off. The document
is rendered as though the element did not exist.
(Emphasis mine)
The transition is not triggered because it was never started. The div was removed completely on hover and returned in its initial state with border-radius: 50%.
Workaround
The only possible way to achieve this affect with display: none using just CSS is to use an animation that will be triggered each time the display: none div appears.
div {
width: 100px;
height: 50px;
background: red;
border-radius: 50%;
transition: border-radius 1s;
animation: display 1s;
}
#hover:hover,
#hover:hover ~ div {
border-radius: 0%;
}
#hover:hover ~ #hide1 {
visibility: hidden;
}
#hover:hover ~ #hide2 {
display: none;
}
#keyframes display {
0% {
border-radius: 0;
}
100% {
border-radius: 50%;
}
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't (unless I have an animation)</div>

No, you cannot use display:none;
Reason:
When using display:none; - The element will be hidden, and the page will be displayed as if the element is not there. So when you hover over it - the element is totally removed...and border-radius:0%; never gets applied. When you hover away - the element shows immediately as the css tells it to - with border-radius:50%;
visibility:hidden; hides an element, however the element will still take up the same space as before. The element will be hidden, but still affect the layout.

You just can use transition for numerical properties in CSS, So you should use opacity and transition: all 1s to do this:
div{
width:100px;
height:50px;
background:red;
border-radius:50%;
transition: all 1s;
}
#hover:hover, #hover:hover ~ div{
border-radius:0%;
}
#hover:hover ~ #hide1{
visibility:hidden;
}
#hover:hover ~ #hide2{
opacity: 0;
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>

div{
width:100px;
height:50px;
background:red;
border-radius:50%;
transition: border-radius 1s;
}
#hover:hover, #hover:hover ~ div{
border-radius:0%;
}
#hover:hover ~ #hide1{
visibility:hidden;
}
#hover:hover ~ #hide2{
visibility: hidden;
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>
This will work. On mouse out third div also have transition.

Preventing divs from clearing inside an animated container

I have a horizontal jQuery animated slider which works great, except as its width begins to decrease, no matter how I set up the <divs> inside they go to newline. I want them to stay on the same line to create this smooth illustion.
Here's what I mean: jsfiddle
How do I prevent them from clearing?

use max-width instead of width:
#container { max-width:500px; height:500px;border:2px dotted maroon; }
.red, .blue, .green { display:inline-block;max-width: 250px; height:50px; margin:0 auto;}
here is the jsfiddle link
UPDATE:
to avoid clear try jsfiddle

How can I smoothly transition in a div on hover? [Tumblr Updates Tab]

I am sure this has been answered before, but I am not sure where to look for it, nor how to really word the question. But basically, I am creating an updates tab for a tumblr theme and I'm curious as to how make a div smoothly transition in while hovering over a parent div, if that makes sense.
Essentially I would like the div to transition in smoothly when I hover over the tab like it does when I click on a tab in my updates tab in my blog. However this tab was created using a tutorial that used a jquery code to create the smooth opening effect, and I don't know anything about jquery or javascript on my own.
I have the general idea of how to make a div show only when you hover over the parent element by using display:none and display:block... but it doesn't transition in smoothly, and as I've read there is no way to do so with CSS.
I have tried playing with height and opacity as well, but while it was a bit smoother, it was a rather messy transition with dealing with text and borders of the div I'm trying to show and hide.
Basically what I am asking is how I can create the same effect in my blog's updates tab that opens and closes when clicking on the tab, but using hover rather than click. I would love for the div to show when I'm hovered over the tab, as well as when my mouse is within the containing div, but close once my mouse leaves the tab. Sorry if that sounds confusing.
Here is the CSS:
#tab{
margin:auto;
}
.tab{
margin-top:0px;
margin-bottom:2px;
margin-left:-5px;
margin-right:-5px;
padding:7px;
border:1px solid #000000;
text-align:center;
}
#tab:hover .contents{
display:block;
}
.contents{
display:none;
margin-top:3px;
margin-bottom:3px;
margin-left:10px;
margin-right:10px;
padding:5px;
border:1px solid #000000;
text-align:center;
font-size:11px;
}
Here is the HTML for that CSS:
<div id="tab">
<div class="tab">Tab</div>
<div class="contents">
Tab Contents.
</div>
</div>
Jquery/ or javascript? From the tutorial from my blog's updates tab:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".inside").hide();
$(".label").click(function(){
$(this).next(".inside").slideToggle('slow');
});
});
</script>

You can use CSS3 transition-property to add 'smooth' effect. The only 'problem' with that , it doesnt work on IE9 and earlier versions. You can see example of that: here

You can probably do it like this. Use opacity instead for the display and transition. I added some pointer-event and make it none so once it is hidden, by the opacity, you can't interact it, which act like display: none.
#tab{
margin:auto;
}
.tab{
margin-top:0px;
margin-bottom:2px;
margin-left:-5px;
margin-right:-5px;
padding:7px;
border:1px solid #000000;
text-align:center;
}
#tab:hover .contents{
opacity: 1.0
}
.contents{
opacity: 0.0;
margin-top:3px;
margin-bottom:3px;
margin-left:10px;
margin-right:10px;
padding:5px;
border:1px solid #000000;
text-align:center;
font-size:11px;
transition: opacity 100ms ease-in-out;
pointer-events: none;
}

As an alternative, if the CSS3 transition does not work, you can try this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".inside").hide();
$(".label").click(function(){
$(this).next(".inside").slideToggle('slow');
});
$(document).on("hover", ".label", function(){
$(this).next(".inside").slideToggle('slow');
});
});
</script>

css style is not setting back after h:over

In my application i have the following code.
.test>div {
display: none;
}
.test:hover>div {
background-color: red;
display: inline-block;
z-index: 9999;
height: 100px;
}
When I mouseover test a popup will open and mouseout it will hide.
But after mouseover and mouseout the .test:hover>div is still retains and not hides. When i inspect the element, the .test:hover>div is still active even after mouseout of .test.
CSS child selector (>) doesn't work with IE
in the above link, css selector unable to select, but here it select and not applying any other style after that.
This works fine in all the browsers except IE8.

I did an example and display:none is not a good ideia because div is removed from dom. The explanation of mozilla: Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.
Then I used background:transparent to element exists, but you can try with visibility.
Here is my HTML:
<div class="test">
<div></div>
</div>
and my css:
.test{
float:left;
position:relative;
width:100px;
height:100px;
border:solid 1px;
}
.test > div{
float:left;
position:relative;
width:50px;
height:50px;
background-color:transparent;
}
.test > div:hover{
background-color:red;
}
and the example working at jsfiddle: https://jsfiddle.net/xukLc5h1/

Growing List Items as Graph

I have a list which list items grow dynamically with JavaScript until 100%. This works.
But I want it to look something like this
So my problem here is. How can I make them grow to the top. I tried with height, but then they grew to the bottom. Also rotating them with CSS doesn’t really work, because the more list items are added the more the list moves to the bottom…
Does anyone have any idea?
Thank you!!

Use absolute positioning for the li-elements. Example:
http://jsfiddle.net/J5pB7/
ul{
height:300px;
border:1px solid #666;
position:relative;
}
li{
display:inline-block;
width:20px;
position:absolute;
bottom:0px;
background-color:green;
}
#a{
height:50%;
margin-left:30px;
}
#b{
margin-left:80px;
height:10%;
}
#c{
margin-left:130px;
height:90%
}