I have a simple html code that has some data but the li has image background and on hover i want to show the data from span.
HTML CODE:
<ul class="container">
<li class="icons_27"><span class="data_27">DATA 27 - TORONTO</span></li>
<li class="icons_28"><span class="data_28">DATA 28 - NEW YORK</span></li>
</ul>
CSS:
.container li span {
display: none;
}
.container li span:hover {
display: block;
}
My question is how can i show the span data on hover ?
you need to style the hover on li
.container li:hover span {
display: block;
}
but this will work only if your li is visible even when the inner span has display: none
(otherwise your li have no a visible area in which you can hover).
You may solve this potential issue defining, for example, a width or an height to your list-items.
Or — instead of giving display: none to the inner span — you may use a different style, e.g.
.container li span {
visibility: hidden; /* or also opacity : 0; */
}
.container li:hover span {
visibility: visible; /* or also opacity : 1; */
}
Note: the opacity approach (instead of display or visibility) would also give you the opportunity to make a graceful appearing/disappearing effect using a CSS3 transition
If you want the span to display when the li is hovered, put the :hover selector on the li instead:
.container li span {
display: none;
}
.container li:hover span {
display: block;
}
Demo at http://jsfiddle.net/D3QNr/
Related
I have made a little navigation, upon hovering above the home I want to let it slowly slide out to the left using a transition: 0.4s; but it doesn't want to do anything, I've applied it to every element just to show that it doesn't work no matter what.
Anyone knows how to fix this? Maybe it's because of the position: fixed; ?
I have made a jsfiddle, keep in mind that it's only a snippet of my site, and has no esthetic style.
Thanks in advance!
You cannot make a transition on the display property.
You can't put a transition on the display property.
Here is a jsFiddle that uses the transition on max-width to allow a transition to happen.
.desktopnav > ul > .dropdown > .dropdown-content {
float: left;
transition: max-width 0.4s;
overflow: hidden;
max-width: 0px;
}
.desktopnav >ul > .dropdown:hover .dropdown-content {
display: block;
max-width: 500px;
}
you will need to had more css to hide undesired visual effect and force the list item to stay aligned on top.
Your use of ul/li is a bit off, li should only be children of ul elements, not section elements, and ul should only have li elements as children.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
This is a list of properties that can be animated. Display is not one of those. That's why you aren't seeing a transition.
You cannot animate the display property. If you want to accomplish a "slide to left" effect, you have to animate the max-width property.
I've forked your fiddle to illustrate this: https://jsfiddle.net/w811wvfp/1/
Basically what I did was:
.desktopnav > ul > .dropdown {
...
white-space: nowrap;
}
.desktopnav > ul > .dropdown > .dropdown-content {
...
max-width: 0;
white-space: nowrap;
overflow: hidden;
}
.desktopnav > ul > .dropdown:hover .dropdown-content {
max-width: 1000px;
}
I was trying the examples from w3schools: http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1 but I doing the same in my CSS and it does not work.
CSS:
nav > ul > li{
display: inline-block;
padding: 0px;
margin: 0px;
transition: width 2s;
}
nav > ul > li:hover{
width: 20%;
}
hover works without problems, but does not the transition... this should be easy
The browser typically cannot transition an element's property without having both a start and end value. Give it an initial width.
nav > ul > li {
width: 100px;
You'll notice that if you remove the initial width from the example you gave the transition ceases to function.
You need to define the initial/start width of the element before you apply transition
Demo
nav > ul > li {
display: inline-block;
padding: 0px;
margin: 0px;
transition: width 2s;
background: #f00;
width: 0; /* Add this */
}
nav > ul > li:hover {
width: 20%;
}
Some tips :
Don't use px if the value is 0 so unit doesn't matter.
I hope you know that you are using inline-block so white-space will occur
Don't use too specific selectors if not required, assign a class to the parent element to uniquely identify the element. So instead of writing nav > ul > li you can write .some-class-nav > li. Also you can get rid of > if you are sure that your li items won't have child li
I have a ul list and would like to hide all the text that is not inside an anchor. This is markup from a CMS so I can't add in additional selectors...
<ul class="list">
<li class="sub">
link not linked
</li>
</ul>
I have tried using the following css but it doesn't work.
.list .sub:not(a) {
display: none;
}
Why doesn't this work?
Jsfiddle: http://jsfiddle.net/9tg0g44e/
.sub:not(a) matches any element with the class .sub if it's not an a element.
Since the .sub here is a li, it's not an a, so that hides the li and all its contents.
Normally, to select any children of .sub that aren't a elements, you'd use .sub > :not(a) instead, but since the other text is a direct sibling of the a element you won't be able to target it with a selector.
Instead of using display: none, you can use the visibility property instead:
.list .sub {
visibility: hidden;
}
.list .sub a {
visibility: visible;
}
But note that this will also hide the bullet because it's part of the li element and cannot be targeted separately. If you need the bullet to be shown, you can replace it with a :before pseudo-element, which works slightly differently from an actual list marker:
.list .sub {
list-style: none;
visibility: hidden;
}
.list .sub:before, .list .sub a {
visibility: visible;
}
.list .sub:before {
content: '\2022';
}
I am working on my navigation and it's currently in a list style. How can I make it horizontal instead?
Here is the CSS code and my site is https://centrecorp.squarespace.com/
.main-navigation {
.nav-font;
float:right;
ul {
padding-left: 0;
li a {
display: inline-block;
color:#nav-color;
ul {
display: none;
}
&:not(:last-child) {
margin-right: .5em;
}
&:hover > ul {
display: inline-block;
color:#nav-color-hover;
}
&.active-link > a {
color:#nav-color-active;
}
&.active-folder > a {
}
}
}
}
Thanks!
Here is the boilerplate CSS I find works best for these.
/* reset */
ul,li { list-style:none; margin:0; padding:0 }
/* float */
ul li { display:block; float:left; }
/* clear floats */
ul:after {display:block; clear:both; visibility: hidden; content:"."; height:0;}
We can use
li { display:inline; } or li { display:inline-block; } but I find just a straight clear as shown above the least hassle when it comes to setting look and feel.
Comming soon is box flex - will no doubt be the way we are doing them soon
If you want the list items to be displayed next to each other, style them as display: inline or display: inline-block.
By default they are block, which by default occupy 100% of their parent's (inner) width, and thus are placed underneath each other.
You can also use float: left, but floating introduces other problems as well. For instance, if the line is too long and wraps, all items have to be exactly the same height, otherwise the page will look really messed up. In general, for a toolbar, image gallery or any such (optionally wrappable) line of items, it's generally better to use display: inline-block than float: left.
So you could change li a into two layers, so you can add the display to li elements:
li
/* This is added to style the list items */
display: inline-block;
/* This is extra: hide the discs */
list-style: none;
/* This is extra extra: show a `|` inbetween the items instead. */
&:before {
content: "|";
}
&:first-child:before {
content: "";
}
/* From here, it's the existing style of the links inside the list items. */
a {
display: inline-block; /* You may no longer need this line */
color:#nav-color;
....
Check out this link:
http://www.w3schools.com/css/css_navbar.asp
li{display:inline;}
I have a list of items of which only the first is visible and on list hover shows all items with side effect of changing the position of surrounding content. How to evade this unwanted effect?
Here is an example list:
http://jsfiddle.net/dsbonev/z8Sjy/
All examples that I checked for styling menus have a two-level structure (parent -> children). On parent hover children are shown. But I don't have a parent to hover onto nor I want to promote one of the children as a parent by moving it out of the list and thus breaking the semantic of the markup.
Figured it out! This is what I wanted:
http://jsfiddle.net/z8Sjy/
I accept comments with shortcomings or improvements of this method.
HTML
<div class="list-wrapper">
<ul class="items">
<li>stackoverflow</li>
<li>superuser</li>
<li>serverfault</li>
</ul>
</div>
CSS
.list-wrapper, .items {
display: inline-block;
}
.list-wrapper {
position: relative;
background-color: blue;
height: 1em;
}
.items {
position: absolute;
background-color: red;
}
.items > li:not(:first-child) {
display: none;
}
.items:hover > li:not(:first-child) {
display: block;
}
You could position the list absolutely and then add padding to the paragraph to compensate.
http://jsfiddle.net/z8Sjy/2/
Instead of using display: none & display: block use visibility: hidden & visibility: visible. That way they take up the space in the HTML document, but are not shown:
Working example: http://jsfiddle.net/z8Sjy/3/
Edit
The following CSS would be more cross-browser compatable for showing / hiding "not first-child" elements as the selector :not is actually CSS3.
.items > li:first-child ~ li {
display: none;
}
.items:hover > li:first-child ~ li {
display: block;
}