Issue with visibility: hidden; and transition in HTML - html

HTML:
<link rel="stylesheet" type="text/css" href="s.css"/>
<div id="xd"><ul>a</ul></div>
CSS:
#xd ul {
visibility: hidden;
transition: all 1s;
}
Under Chrome 27, the "a" appears for 1 second and then dissapears. How can this happen with visibility: hidden; ?
Please expain why this happens.
Thank you.

There is a difference between visability:hidden and display:none in CSS. For what you want, I would do something like this instead to mitigate your issue:
CSS:
#xd ul {
display: none;
transition: all 1s ease-in-out;
}
HTML:
<ul id="xd"><ul><li>a</li></ul></ul>
For an explanation of the difference between the two, here is a link with more info: http://www.w3schools.com/css/css_display_visibility.asp
Essentially, to paraphrase the above link, visability:hidden preserves the space around the element and will still affect the rest of the layout, whereas display:none does not affect the rest of the layout and works as if the element is completely removed from the page. So, there may be a quirk in Chrome which displays the visability:hidden element first before it is hidden because of that.
JSFiddle example: http://jsfiddle.net/JKA8z/

Related

Element hidden by default - show on hover with CSS

I have a DIV element which is hidden by default. But on hover, I want it to be visible.
This is my current CSS:
.main-menu .left-footer{
display: none;
}
.main-menu:hover + .left-footer {
display: block !important;
}
And HTML:
<div class="left-footer">
<small>
Support Terms of Service Privacy <br />
© 2015 LittleBux. All Rights Reserved
</small>
</div>
What am I doing wrong here?
I am taking example from this topic
They're using conflicting selectors. In the first, .left-footer is a child of .main-menu. In the second example, it's a sibling.
As you haven't posted the bit of code with .main-menu I'm not sure about it's relationship to .left-footer, but you need to make the two rules consistent.
Seems to me like you're getting display and visibility mixed up. display: none; makes the element disappear from the document, meaning you can't interact with it. What you want to use instead is visibility: hidden;, which makes the element hidden but still keep its place on the page. Try changing the first block of code to the following:
.main-menu .left-footer{
visibility: hidden;
}
.main-menu:hover + .left-footer {
visibility: visible;
}

Creating CSS3 dropdown menus on a horizontal navbar with a fade-in effect

I've been trying to get this right for a couple of days now, and so far, I haven't really made progress on getting the dropdown working at all, though partly because the guides I've read all make use of symbols in the CSS that I'm unfamiliar with, such as the tilde and 'greather than' symbols. In any case, here is the base code that I have:
<nav class="bg">
<ul class="width">
<li>Link</li>
<li>
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</nav>
CSS:
.width{margin:0 auto;min-width:1000px;width:84%;}
nav ul{width:100%;text-align:justify;font-size:0;position:relative;}
nav ul:after{content:"";width:100%;display:inline-block;}
nav li{list-style:none;display:inline-block;}
nav a{display:inline-block;padding:10px;}
I think the next step is to put display:none; on the inner <ul> elements to hide them by default, but the next part is where I get lost. How do you use CSS to make one object do something when something else happens to another object? In this case, how would you use the CSS to make the dropdown list appear when the relevant link is hovered?
Here is a Demo
First of all you need to understand how CSS Selectors are working.
For the way to add a Dropdown, you go for the hover on the parent element and wrap that around the sub-menu. Than if the hover event is fired everything inside will be able to select true :hover
Like:
.nav li:hover .sub-menu {
left: 0;
top: 100%;
}
I also added the Fade-In effect. There for you work with css-transition.
But be careful, if your Sub-menu will be on/off with display:block and :none it wont work i guess.
U may play around with that in that fiddle to fiddle out what you can do and how your changes effect the output.
.nav .sub-menu {
position: absolute;
left: -1000px;
top: -1000px;
opacity: 0;
-o-transition: opacity .25s;
-ms-transition: opacity .25s;
-moz-transition: opacity .25s;
-webkit-transition: opacity .25s;
transition: opacity .5s;
}
.nav li:hover .sub-menu {
left: 0;
top: 100%;
opacity: 1;
}
You can even create a dropdown without using any selectors. But it is important to know about selectors. Go through this link to know more about selectors.
You can have a look at Pure CSS Dropdown Menu to check how to create dropdown menu with css.
You have yourself correctly pointed out the problem and that is :
How do you use CSS to make one object do something when something else
happens to another object?
I think this simplest demo, would shed some light on your above question.
Specifically have a deeper look at below CSS in the demo.
#circle:hover .popup{
display : block;
}
How do you use CSS to make one object do something when something else happens to another object? In this case, how would you use the CSS to make the dropdown list appear when the relevant link is hovered?
li > a ul { display: none; }
li > a:hover ul { display: block; }
You can also play with transitions to add fade-in effect.

Display value in css not working as expected

The HTML code
<!DOCTYPE html>
<html>
<head>
<title>Testing Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="hidden">Hello World</h1>
</body>
</html>
The CSS code
.shown {
display: hidden;
}
When this code is run the heading is still displayed. Why is this happening. I thought the display value of hidden would hid the element from the normal flow of the page.
hidden is not a valid value for display, you are after none. Also, your class name is incorrect, it should be .hidden
.hidden{
display: none;
}
Also, there is another property called visibility that also hides content with visibility: hidden. The difference is display makes it appear as the element has been removed completely from the page, whereas visibility makes the content disappear, but the space the element occupies is still respected.
Actually you have messed up the values of two different CSS attributes i.e. visibility and display.
display
.class_name
{
display:none;
}
Setting the display as none causes the object not to be visible and along with that the space required by the object is not alloted i.e. the invisible object doesn't occupy any space.
visibility
.class_name
{
visibility:hidden;
}
Setting the visibility as hidden causes the object not to be visible but the space required by the object is alloted i.e. it occupies the space it requires although it's not visible.
Reference
you have wrong class try this
<h1 class="shown">Hello World</h1>
and css
.shown {
display: none;
}
Use
.hidden{
display: none;
}
Use
.shown {
display: none;
}
or
.shown {
visibility: hidden;
}
First of all your css tag name is mismatching to your HTML code. And your CSS is wrong as well.
You could either write display: none or visibility: hidden.

CSS - display:none on hover self

I am trying to create an effect where if a user hovers over an element, the element disappears. I have tried the code below, but it seems that the display:none; breaks the CSS. I am wondering why my CSS does not work, and how I would solve my problem.
http://jsfiddle.net/2c42U/
<div class="foo">text</div>
.foo:hover {
color: red;
display: none;
}
Try changing the element's opacity instead: http://jsfiddle.net/XtmVQ/
.foo:hover {
opacity:0;
}
try this instead of display:none
visibility:hidden
Try this:
.foo:hover {
opacity: 0;
}
What is your final intent for this?
as #Richard said, use opacity
also, to be backwards ie, do as follows:
filter:alpha(opacity=0); /* For IE8 and earlier */
and you can also add a transition:
transition: 0.5s
so that it is not instant.
You can do what the others suggested, use opacity: 0; or visibility:hidden;, but if you must have it hidden from the flow of the page. Then do the following:
Use a CSS like this:
.hidden{
display: none !important;
}
You can use the class hidden and apply it to any element to hide it. For the hover behaviour you want, you'll require JavaScript/jQuery to apply the class name. See http://jsfiddle.net/rkH7F/
i think css will not work. use jquery
UPDATE
ohh, my bad. css will work but the jquery will have a better effect
$('#outer').mouseenter(function() {
$("#outer").hide();
}); $('#outer').mouseleave(function() {
$("#outer").show();
});
FIXED
$('#outer').mouseenter(function() {
$("#outer").slideUp();
}); $('#outer').mouseleave(function() {
$("#outer").slideDown();
});

Chrome Does Not Change li Element State

I'm not quite sure why, but the CSS code in this fiddle does not work properly in Chrome. In Firefox, if you hover on one of the li elements, the text would become visible but not in Chrome. Apparently, in Chrome if you change the display attribute on hover, the whole CSS rule for the li element would just get ignored (The state doesn't change to hover actually). However, if you use the Chrome Developer Tools to change the state of the element manually, it'd work just fine. Am I missing something here? Or is this a bug in Chrome? I've tested this in Chrome 22 (stable release) and 24 (dev channel release).
I don't know what is getting ignored as you said, because I see no difference, but by removing display: inline;
li:hover
{
overflow: visible;
}
and it works
My Fiddle
Updated Fiddle assuming you need to have a background color for the text
Updated Fiddle
HTML
<ul>
<li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
<li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
<li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
<li><span>Abcdefghijklmnopqrstuvwxyz</span></li>
</ul>​
CSS
ul
{
width: 100px;
}
li
{
overflow: hidden;
text-overflow: ellipsis;
}
li:hover
{
overflow: visible;
}
li:hover span
{
background-color: #ff0000;
}
​
While having the text wrapped in a span would allow you to modify the display attribute, it's redundant in this case because you want to set it to inline. Wrapping it inside the span element is enough.