I'm here trying to display a list item on hovering an anchor tag. How to affect other elements when a div is hovered - tried using this post but I couldn't succeed.
I'm here trying this with only pure CSS.
Here's the FIDDLE.
And below is the code.
HTML :
<div class="container">
<div class="menu">
<a class="user" href="#">Brett</a>
<ul>
<li>
Settings
</li>
<li>
Logout
</li>
</ul>
</div>
</div>
CSS :
body {
font-size: 50px;
}
.container {
margin-top: 100px;
margin-left: 200px;
}
a {
text-decoration: none;
/*color: #fff;*/
}
.user {
position: relative;
z-index: 1000;
margin-left: -200px;
}
ul {
list-style: none;
position: absolute;
top: 2%;
left: 11%;
visibility: hidden;
opacity: 0;
}
.menu a:hover .menu ul {
visibility: visible;
opacity: 1;
-webkit-transition: visibility 1s, opacity 1s;
/*color: #000;*/
/*-webkit-transition: color 1s;*/
}
Try using the adjacent siblings selector
.menu a:hover + ul instead of .menu a:hover .menu ul
jsFiddle Demo
You have to use the adjacent siblings selector:
.menu > a:hover + ul
Also, there's something wrong with your property -webkit-transition: visibility 1s, opacity 1s; as it is preventing the menu from appearing.
http://jsfiddle.net/KA5Tg/4/
Here is update fiddle, Position is not correct for menu but its working on hover.
I have updated css as:
ul {
list-style: none;
position: absolute;
top: 2%;
left: 11%;
display :none;
}
.menu a:hover + ul {
display :block !important;
opacity: 1;
-webkit-transition: visibility 1s, opacity 1s;
}
Related
I have a CSS only dropdown mega menu. Now I need to add delay on hover, but only when not already hovering a tab. The goal is to remove the delay before showing subsequent sheets - without using JavaScript. It may or or may not be possible. I have tried using sibling selector to set zero transition delay on the neighbour of the hovered element - this naturally doesn't work because the transition delay rule applies to the 'to' hover state, not the 'from' state.
body * {
outline: 1px solid black;
background-color: #0001;
}
ul {
margin: 0;
padding: 10px;
display: inline-flex;
}
li {
display: inline-block;
padding: 10px;
}
ul li div {
position: absolute;
background-color: white;
width: 200px;
height: 200px;
visibility: hidden;
transition: visibility 0s;
transition-delay: 300ms;
}
ul li:hover button {
background-color: blue;
color: white;
}
ul li:hover div {
visibility: visible;
}
ul li:not(:hover) div {
transition-delay: 0s;
}
a {
padding: 10px;
display: block;
}
a:hover {
text-decoration: none;
}
<ul>
<li>
<button>Link</button>
<div>Sheet</div>
</li>
<li>
<button>Link</button>
<div>Sheet</div>
</li>
</ul>
<a href='#'>Background link</a>
Is this what you want. adding transition delay on the hover state not the actual element css
ul li:hover div{visibility: visible;transition-delay: 1000ms;}
body * {
outline: 1px solid black;
background-color: #0001;
}
ul {
margin: 0;
padding: 10px;
display: inline-flex;
}
li {
display: inline-block;
padding: 10px;
}
ul li div {
position: absolute;
background-color: white;
width: 200px;
height: 200px;
visibility: hidden;
transition: visibility 0s;
}
ul li:hover button {
background-color: blue;
color: white;
}
ul li:hover div {
visibility: visible;
transition-delay: 1000ms;
}
ul li:not(:hover) div {
transition-delay: 0s;
}
a {
padding: 10px;
display: block;
}
a:hover {
text-decoration: none;
}
<ul>
<li>
<button>Link</button>
<div>Sheet</div>
</li>
<li>
<button>Link</button>
<div>Sheet</div>
</li>
</ul>
<a href='#'>Background link</a>
I have created a fiddle for this: http://jsfiddle.net/Lux0ztyt/
When hovering over the SPAN (A,B,C,D, etc.), I need it to change the background to the same as when hovering the rest of the bar however I can't work out how to do it.
I know the problem is because the SPAN is at the END of all the elements but I am not able to change the positioning of this. How can it work with the positions staying as they are?
I have tried:
#my-list li span:hover ~ div {
/* background stuff */
}
And also:
#my-list li span:hover div {
/* background stuff */
}
And also:
#my-list li span:hover + div {
/* background stuff */
}
Any suggestions?
HTML:
<ul id="my-list">
<li class="100"><div style="width: 100%;"><label>100%</label></div><span>A</span></li>
<li class="85"><div style="width: 85%;"><label>85%</label></div><span>B</span></li>
<li class="95"><div style="width: 95%;"><label>95%</label></div><span>C</span></li>
<li class="85"><div style="width: 85%;"><label>85%</label></div><span>D</span></li>
<li class="95"><div style="width: 95%;"><label>95%</label></div><span>E</span></li>
<li class="80"><div style="width: 80%;"><label>80%</label></div><span>F</span></li>
<li class="90"><div style="width: 90%;"><label>90%</label></div><span>G</span></li>
<li class="95"><div style="width: 95%;"><label>95%</label></div><span>H</span></li>
</ul>
CSS:
#my-list {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#my-list li {
display: block;
width: auto;
text-align: left;
position: relative;
margin: 2px 0px;
}
#my-list li span {
position: absolute;
left: 5px;
top: 0px;
color: #fff;
text-shadow: 1px 1px 1px #555;
font-size: 0.85em;
}
#my-list li div, #my-list li label, #my-list li span, #my-list li {
height: 30px;
line-height: 30px;
}
#my-list li div {
position: absolute;
background: #b02976;
left: 0px;
top: 0px;
width: 0px;
border-radius: 7px;
transition: width 1s, background-color 0.4s ease;
}
#my-list li div:hover {
background: #009e77;
transition: all 0.4s ease;
}
#my-list li div:hover > label {
display: block;
opacity: 1.0;
transition: all 0.4s ease;
}
#my-list li div label {
position: absolute;
right: 5px;
color: #fff;
font-weight: bold;
font-size: 0.7em;
opacity: 0;
transition: all 0.4s ease;
text-shadow: 1px 1px 1px #555;
}
Your code is almost working. The only thing you should change:
Handle the :hover on li rather than the div - then you have no problem:
change
#my-list li div:hover
to
#my-list li:hover div
and
#my-list li div:hover > label
to
#my-list li:hover div > label
The span element will send its :hover to the li - which then will colorize its div child as defined in the css.
http://jsfiddle.net/taqveyjs/1/
TimeDead's answer is correct in that you can't target a parent in CSS. I took a different approach though:
http://jsfiddle.net/austinthedeveloper/Lux0ztyt/2/
#my-list li div {
position: absolute;
background: #b02976;
left: 0px;
top: 0px;
width: 0px;
border-radius: 7px;
transition: width 1s, background-color 0.4s ease;
z-index:-1;
}
#my-list li:hover div {
background: #009e77;
transition: all 0.4s ease;
}
#my-list li:hover div > label {
display: block;
opacity: 1.0;
transition: all 0.4s ease;
}
The trick is to z-index the div so it is behind the li, masking your span. After that, you just update your hover classes to target the li instead of the div and everything works.
Sadly what your asking to do I'm not sure can be done strictly in CSS since in CSS you cannot select and change the parents background in this case the span is the child of the div there for cannot modify it's attributes.
my problem is that when I hover over the area where the hidden list is, it shows the hidden list. I only want it to show the hidden list when hovered over the 'Language' link on the dropdown menu. Why is it doing this, it's probably something blindingly obvious that I can't spot.
Cheers :)
EDIT: I've already tried using a fixed height for the #lang_bar. I also need the transitions to still work. I've already tried using the display:none and display:block; but that didn't work so I used visibility instead.
Any ideas?
HTML:
<div id="lang_bar">
<ul>
<li><strong>Language</strong>
<ul>
<li><strong>Maori</strong></li>
<li><strong>Tongan</strong></li>
<li><strong>Chinese</strong></li>
<li><strong>Japanese</strong></li>
<li><strong>Korean</strong></li>
</ul>
</ul>
</div>
#lang_bar {
font-family: 'Open Sans', sans-serif;
color: white;
padding-left: 152px;
text-transform: uppercase;
z-index: 40;
position: absolute;
padding-top: 2px;
top: 0;
}
#lang_bar ul ul li a {
padding-top: 3px;
padding-left:5px;
}
#lang_bar ul li ul li a:before {
content: '';
display:block;
right: 0px;
height: 2px;
bottom:117px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.2);
}
#lang_bar ul li ul li a:after {
content: '';
display:block;
right: 1px;
height: 2px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.6);
}
#lang_bar li, #lang_bar li ul {
text-decoration: none;
list-style-type: none;
}
#lang_bar ul {
list-style: none;
padding-left: 0px;
}
#lang_bar ul li {
float: left;
width: 100px;
text-align: left;
line-height: 21px;
}
#lang_bar ul li a {
display: block;
color: #FFF;
background: transparent;
text-decoration: none;
text-align: center;
}
#lang_bar ul li ul {
visibility: hidden;
font-size:12px;
opacity: 0;
}
#lang_bar ul li:hover ul {
opacity: 1;
visibility: visible; /* display the dropdown */
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#lang_bar ul li ul a:hover{
transition-duration: 0.6s;
background-color: rgba(255, 0, 0, 0.23);
}
I changed your css a little bit and here is the result
I used display:none and display: block in place of visibility, and everything is working as it should be.
http://jsfiddle.net/sy3qowxs/5/enter link description here
And here is your final CSS:
#lang_bar {
font-family: 'Open Sans', sans-serif;
color: #123111;
padding-left: 152px;
text-transform: uppercase;
z-index: 40;
position: absolute;
padding-top: 2px;
top: 0;
}
#lang_bar a:link{color:#333333;}
#lang_bar ul ul li a {
padding-top: 3px;
padding-left:5px;
}
#lang_bar ul li ul li a:before {
content: '';
display:block;
right: 0px;
height: 2px;
bottom:117px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.2);
}
#lang_bar ul li ul li a:after {
content: '';
display:block;
right: 1px;
height: 2px;
width: 100px;
position: absolute;
background: rgba(255, 255, 255, 0.6);
}
#lang_bar li, #lang_bar li ul {
text-decoration: none;
list-style-type: none;
}
#lang_bar ul {
list-style: none;
padding-left: 0px;
}
#lang_bar ul li {
float: left;
width: 100px;
text-align: left;
line-height: 21px;
}
#lang_bar ul li a {
display: block;
color: #FFF;
background: transparent;
text-decoration: none;
text-align: center;
}
#lang_bar ul li ul {
display: none;
font-size:12px;
opacity: 0;
}
#lang_bar ul li:hover ul {
opacity: 1;
display: block; /* display the dropdown */
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#lang_bar ul li ul a:hover{
transition-duration: 0.6s;
background-color: rgba(255, 0, 0, 0.23);
}
As an alternative to the display: none solution, for accessibility reasons you can use position:absolute and then move the hidden element off screen:
ul li ul {
position:absolute;
top:-1000px;
}
ul li:hover ul {
top:auto;
}
It should work with visibility, since it hides the element (like display: none) but doesn't remove it from the DOM
Here is a working example: Dropdown Menu
HTML
<ul class="menu">
<li class="menu-item"> Dropdown Menu
<ul class="submenu">
<li class="submenu-item">Link</li>
<li class="submenu-item">Link</li>
<li class="submenu-item">Link</li>
<li class="submenu-item">Link</li>
<li class="submenu-item">Link</li>
</ul>
</li>
</ul>
CSS
.menu-item {
position: relative;
}
.menu-item:hover .submenu {
visibility: visible;
opacity: 1;
}
.submenu {
position: absolute;
visibility: hidden;
transition: all .2s ease;
opacity: 0;
top: 100%;
}
.submenu-item {
padding: .4em;
}
What about just using the adjacent sibling combinator:
Change: #lang_bar ul li:hover ul
To: #lang_bar ul li a:hover + ul
To add to the previous answer, the reason this works when you use the display property instead of visibility is because display removes the element from the document flow, and other elements reflow in its place. Visibility, on the other hand, hides the element, but leaves the empty space as if it were still there. So when you used visibility: hidden, your list item looked like it just contained the text "Language" and the link, but the hidden ul was still there, and still hoverable. That's why when you hovered over where the list item should have been, it reappeared; technically, you were hovering over that first list item, because the sub menu was a child of it.
In general, I use display:block/display:none to toggle hiding and showing of items, rather than visibility. Typically the use case is that you want the element completely hidden from the page, and elements around it to reflow, and the display property will do that for you.
I'm trying to make my dropdown menu with pure css3 but my child ul keeps showing on top of the parent. I've tried with z-index -100, removing the positive z-index value from the parent ul, but nothing happens.
This is my code:
http://jsfiddle.net/z9kCx/
I've updated your fiddle here. Would that work?
I added menu and sub-menu classes to your uls and edited your css a bit:
ul.menu li {
position: relative;
width: 100px;
float: left;
background: #2A2A2A;
text-align: center;
font-size: 14px;
padding: 15px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
list-style-type: none;
}
ul.sub-menu {
padding: 0;
position: absolute;
top: 45px;
left: 0;
width: 145px;
display: none;
opacity: 0;
visibility: hidden;
}
ul.menu li:hover > .sub-menu {
display: block;
opacity: 1;
visibility: visible;
}
What I really want is to have the same effect on the website of www.ditto.com by the menu, if anyone can figure that out, it would be really great, but if not this is what I have and please if anyone can answer this question, I'm in the middle of making a website for someone and I need this info fast!!
This code waits 0.8s when going up but it doesn't wait when it goes down, it just pops down.
Thanks in advance!!
You can see the full code here here: http://jsfiddle.net/zZPPR/
CSS
.one
{
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.8s;
}
.two
{
max-height: 200px;
overflow:visible;
}
Here is a solution that target the second animation in the link. Still a draft though.
http://jsfiddle.net/NicoO/T4Nbk/5/
Update: Max-height is causing speed issues, making the feeling the transition too fast or slow. Here is an alternative solution using transforms: http://jsfiddle.net/NicoO/T4Nbk/7/ same version with Chrome vendor prefixes: http://jsfiddle.net/T4Nbk/9/
CSS:
ul
{
margin: 0;
padding: 0;
}
ul > li
{
display: inline-block;
position: relative;
}
ul > li li
{
display: block;
}
ul > li:before
{
background-color:gray;
top: 100%;
bottom:0;
left: 0;
right: 0;
position: absolute;
content: "";
transition-duration: 0.4s;
z-index:-1;
}
ul > li a
{
display: block;
position: relative;
}
ul > li ul
{
max-height: 0;
overflow: hidden;
position: absolute;
left:0;
width: 300px;
background-color: gray;
transition-duration: 0.4s;
transition-property: max-height;
}
ul > li:hover:before
{
top:0;
}
ul > li:hover ul
{
max-height: 400px;
}
HTML:
<nav>
<ul>
<li>Home</li>
<li>News & Events</li>
<li>
Discover
<ul>
<li>Jordan</li>
<li>Jordan</li>
</ul>
</li>
</ul>
</nav>
CSS of the solution using transforms:
Inspired by: How can I transition height: 0; to height: auto; using CSS?
ul
{
margin: 0;
padding: 0;
}
ul > li
{
display: inline-block;
position: relative;
}
ul > li li
{
display: block;
}
ul > li:before
{
background-color:gray;
top: 100%;
bottom:0;
left: 0;
right: 0;
position: absolute;
content: "";
transition-duration: 0.4s;
z-index:-1;
}
ul > li a
{
display: block;
position: relative;
}
ul > li ul
{
transform: scaleY(0);
transition: transform 0.4s;
transform-origin: top;
overflow: hidden;
position: absolute;
left:0;
width: 300px;
background-color: gray;
}
ul > li:hover:before
{
top:0;
}
ul > li:hover ul
{
transform: scaleY(1);
}
What's happening is that you're not transitioning the overflow property. So as soon as the class two is applied, the overflow is set to visible and the content shows immediately.
Remove the overflow:visible from the class .two and it will work
JSFIDDLE
You should remove overflow:visible;