I created a menu (without using ul and li element that I don't like), it display a submenu for each button, what I want is to be able to add sub-submenu, (and sub-sub-submenu...) without adding new css for each one.
This is what I have actually (simplified):
<div class="button">One button
<div class="submenu"> //what works
<div class="button">something</div>
<div class="button">something</div>
</div>
</div>
<div class="button">Another button
<div class="submenu">
<div class="button">something</div>
<div class="submenu"> //what I'm trying (sub-sub)
<div class="button">something</div>
<div class="button">something</div>
</div>
</div>
</div>
And the css:
.button
{
background-color:#ffffff;
position:relative;
width:200px;
height:20px;
display:block;
}
.submenu
{
background-color:#ffffff;
display:none;
position:absolute;
top:0;
left:200px;
}
.button:hover div
{
display:block;
}
I tried to use first-child but it didn't work, I don't want how to do...
Thanks
.button:hover > div {
display:block;
}
You need the > to target only direct children.
Without it all children which match the last selector will be set to display:block.
Related
JSFIDDLE
HTML
<div id="container">
<a href="#">
<div class="hover">
<div class="imgdiv"></div>
</div>
</a>
<div class="imgdiv_2">
</div>
</div>
CSS
#container{
width:250px;
height:250px;
border:1px solid black;
}
a{
height:250px;width:250px;
}
.hover{
height:250px;
width:250px;
position:absolute;
z-index:1;
}
.hover:hover > .imgdiv{
opacity:0.5;
height:300px;
}
.hover:
hover + .imgdiv_2{
width:4300px;
}
.imgdiv{
height:250px;
width:250px;
background-color:red;
opacity:0;
}
.imgdiv_2{
width:300px;
height:250px;
background-color:black;
opacity:0.1;
}
I have a problem with this part:
hover + .imgdiv_2{
width:4300px;
}
How can I change .imgdiv_2 when I hover .hover
Is this even possible in CSS only?
I can not change the HTML structure or the 250px width.
Is there a way I can select the entire css path from the body?
You can't because CSS selectors can target only an element's descendants or followed siblings... That's how CSS works.
But on your scenario, since the a tag is a sibling to the .imgdiv_2, you can set the :hover on it:
a:hover + .imgdiv_2{
width:4300px;
}
Maybe narrowing it by adding a class to the a tag...
Updated Fiddle
If you want to use sibling selector, two elements must be siblings :)
I edited your html:
<div id="container">
<div class="hover">
<div class="imgdiv"></div>
</div>
<div class="imgdiv_2">
</div>
Here is working fiddle
I'm building a page with a header at the top, a menu on the left and a footer at the borrom. I've defined all of these using .
The link is in the menu. As long as I'm not applying the css, the links work, but as soon as I apply the css that is in an external file it stops working.
I can see it change when I hover and disappear when I click on it, but the page doesn't change.
It only works if I open the link in a new window or in a new tab. Why is it doing this? How can I fix it?
Here's the HTML code :
<body>
<div id="container">
<div id="header">
<h1>Site HTML</h1>
</div>
<div id="menu" >
<h1>Navigation</h1>
<ul>
<li> Javascript </li>
</ul>
</div>
<div id="content">
<p>
</p>
</div>
</body>
and here is the CSS for the menu and the link to clic on.
#menu {
min-width:20%;
max-width:20%;
min-height:80%;
max-height:80%;
background-color:#
margin:0;
padding:0;
position:fixed;
top:10%;
overflow:auto;
}
#menu li {
list-style-type:none;
font:large, arial,sans-serif;
}
#menu a:link,a:visited{
display:block;
font-weight:bold;
color:#FF6600;
background-color:black;
width:75%;
text-align:center;
padding:4px;
text-decoration:none;
}
#menu a:hover {color:#0000FF;}
#menu a:active {visibility:hidden;}
Remove #menu a:active {visibility:hidden;}
Don't think it makes any difference.
Because you are setting the property visibility hidden on active pseudo class. Just remove the line:
#menu a:active {
visibility:hidden;
}
http://jsfiddle.net/gomflo/KEq8U/
I created a CSS menu which has menu items and submenu items. These submenu items are actually big divs which gets shown when the user hovers the menu item.
They work pretty well but I have one problem:
If the submenu is wider than the whole menu, it overflows and may break the pages width in the worst case.
When the submenu reaches the right side of the menu, it should "stick" at right:0px.
Is there any possibility to limit the position of an element to it's grandparental's width? Resp. is there a way to achieve my goal in pure CSS? I don't really want to use JavaScript for that.
This is the HTML structure and an excerpt of the important CSS:
.navi {
height:60px;
width:350px;
position:relative;
background-color:#DEDEDE;
}
.navi ul {
list-style:none;
display:inline-block;
margin-left:50px;
}
.navi ul li {
float:left;
height:60px;
cursor:pointer;
position:relative;
}
.navi ul li a {
height:100%;
line-height:60px;
display:inline-block;
}
.navi ul li:hover .submenu {
display:block;
}
.navi ul li .submenu {
width:200px;
height:100px;
display:none;
position:absolute;
background-color:#F3F3F3;
}
<div class="navi">
<ul>
<li>
<a>a navigation link</a>
</li>
<li>
<a>a navigation link</a>
<div class="submenu">
<!-- content -->
</div>
<div class="arrow"></div>
</li>
<div class="clearfix"></div>
</ul>
</div>
Here is a fiddle showing my menu.
i think that i have forgotten my css but i have a problem
here is my code
<div class="footer_container">
<div class="website_logo_to_footerexpand"></div>
<div class="info_cont">
<div class="info_slide_arrow"></div><!--arrow-->
<div class="info_slide">
<div class="level1">© Datacardz.Inc <?php echo date('Y'); ?></div>
<div class="level2">
About
Terms
Company
Blog
</div>
</div>
</div>
the problem is that when i use the css code:- website_logo_to_footerexpand:hover ~ .info_cont it displays the div but it vanishes as soon as i nove the mouse to the info_cont div
and the code .website_logo_to_footer_expand:hover > .info_cont does not work at all
my css ----
.website_logo_to_footerexpand{
float:left;
cursor:pointer;
background-image:url(data_cardz_imagesprites.png);
background-position:0 0;
width:60px;
height:60px;
}
.info_cont{
float:left;
height:60px;
opacity:0;
visibility:hidden;
}
.website_logo_to_footerexpand:hover ~ .info_cont{
visibility:visible;
opacity:1;
}
http://jsfiddle.net/K4Mp4/1/
Check the demo please.
.website_logo_to_footerexpand{
float:left;
cursor:pointer;
background-image:url(data_cardz_imagesprites.png);
background-position:0 0;
width:60px;
height:60px;
}
.info_cont{
float:left;
height:60px;
opacity:0;
visibility:hidden;
}
.footer_container:hover > .info_cont{
visibility:visible;
opacity:1;
}
you should be putting the hover on .footer_container not .website_logo_to_footer_expand that class is to the left so naturally when you scroll out of it the info will disappear
.footer_container:hover > .info_cont
you also need to add a clearfix because you are floating elements inside .footer_container
you should use the display:block; for floated child divs and display:inline-block; for the parent div then the hovering effect will work
I have a normal li element, it contains a picture. Now when I hover it, it should be surrounded by a div for example which contains some descriptions for the image in the li. Please check out this link http://www.zalando.de/damenschuhe-sandaletten/ and hover the shoes. As you see, it adds information around the image.
I tried several things but the results are not really what I want. Any ideas how to to that in a good way?
Thanks!
Something like this?
<ul>
<li>
<div class="info">Info 1</div>
[Image 1]
</li>
<li>
<div class="info">Info 2</div>
[Image 2]
</li>
<li>
<div class="info">Info 3</div>
[Image 3]
</li>
<li>
<div class="info">Info 4</div>
[Image 4]
</li>
</ul>
ul{
list-style:none;
text-align:center;
padding: 0 35px;
}
li{
display:inline-block;
background: #ddd;
height:200px;
width:200px;
margin:10px;
padding:0;
position:relative;
}
li > .info{
display:none;
position:absolute;
top:0;
left:-40px;
width:35px;
height:100%;
background:#ffa;
}
li:hover{
background:#ccf;
border:5px solid #afa;
margin:5px;
}
li:hover > .info{
display:block;
}
DEMO: http://jsfiddle.net/NhfF3/
you should add a hidden div inside the li element. http://jsfiddle.net/SKxjM/
this is the CSS
.expandable .expansion { display: none; }
.expandable:hover .expansion { display: inline; }
And the HTML should look like this
<ul>
<li class="expandable">this is expandable
<div class="expansion">more info</div>
</ul>
You could try using the CSS :after tag with content.
<li>
<img src="whatever.jpg">
</li>
li:hover:after{
content: 'image caption here';
}
Also, you could dynamically add it, if that makes it work for your site easier:
document.styleSheets[0].addRule('li:hover:after', 'content: \'image caption here\'');