I want to be able to hover over the "inner" element and make the "hoverbar" element appear. The problem I am having is the elements are nested with different parents. I know it would be easier using javascript but I want to know how to do it with CSS if it is possible.
This is how I have been trying to do it
.inner:hover + .other-content .hoverbar{
visibility:visible;}
http://jsfiddle.net/UaXUS/931/
You can apply style just for siblings only. You can't select parent. So if you want to style .hoverbar you can do it in two ways:
1st is change selector:
.content:hover + .other-content .hoverbar {
visibility:visible;
}
2nd is change HTML:
move other-content to be child of content:
*{
margin:0;
padding:0;
}
.content{
height:100%;
width:100%;
background-color:red;
padding:0;
margin:0;
position:absolute;
}
.hoverbar{
height:10%;
width:100%;
background-color:blue;
position:absolute;
bottom:0;
margin:0;
padding:0;
visibility:hidden;
}
.inner:hover + .other-content > .hoverbar{
visibility:visible;
}
<div class="content">
<div class="inner">Inner
</div>
<div class="other-content">
<div class="hoverbar">hoverbar
</div>
</div>
</div>
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
Intention:
a div with a pretty picture and title
when the visitor hovers over the div, the pretty stuff is replaced by a descriptive text
a CSS-only solution
simple, right?
Here's what I am trying:
HTML:
<div class="drunter">
I am below
<div class="drueber">
I am on top
</div>
</div>
CSS:
.drunter {
position:relative;
background-color:#f00;
}
.drueber {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
display:none;
background-color:#00f;
}
.drueber:hover {
display:block;
}
jsfiddle
Why is this not working?
When I view the page in Chrome and go about it with the inspector, switch on the :hover state on the "drueber" element, it works as expected. But when I actually hover over the div, nothing happens.
As the .drueber has display:none; property it can't be hovered. so you need to trigger the hover event on the parent like this :
.drunter:hover .drueber {
display:block;
}
DEMO
.drunter {
position:relative;
background-color:#f00;
}
.drueber {
display:none;
background-color:#00f;
}
.drunter:hover .drueber {
display:block !important;
}
i make a little changes in css try this code.
Hello my wonderful peeps.
The heading "whatever" overlaps on my list.
I want the list to appear after the heading.
<div style="width:1024px;height=auto;position:absoulte;min-height:768px;">
<div class="heading">
<h1>Whatever</h1>
</div>
<div class="list" id="listID" >
<div style="height:15px;">Nope</div>
<div style="height:15px;">Yes</div>
<div style="height:15px;">Maybe</div>
<div style="height:15px;">Definetely</div>
</div>
<button>Print</button>
<button style="posititon:relative;top:0px;">add</button>
</div>
and this is the css
.heading
{
position:relative;
top:50px;
}
.list
{
position:relative;
min-height:10px;
top:0px;
margin-left:20px;
}
http://jsfiddle.net/zd5n3L5z/
Help me out. Thank you :)
Change top to margin top for the heading
.heading
{
position:relative;
margin-top:50px;
}
.list
{
position:relative;
min-height:10px;
top:0px;
margin-left:20px;
}
Since you dont want to affect the possition in relation to other elements, you don't need to use the relative attribut. So your 'CSS' should look like:
.heading
{
margin-top:50px;
}
.list
{
min-height:10px;
margin-left:20px;
}
This will keep your css clean!
Add display: inline in class .list:
css
.heading
{
position:relative;
top:50px;
}
.list
{
position:relative;
min-height:10px;
top:0px;
margin-left:20px;
display: inline;/*Add display inline*/
}
fiddle
inline This value causes an element to generate one or more inline
boxes.
Also you have a syntax error in your main div container. Is position:absolute no absoulte.
You set the .heading top:50px. What happens here is that this value (50px) is not relative to the .list but to the div it sits in. Simply change the value like this:
.heading
{
position:relative;
}
Don't use position top for ".heading" class
.heading
{
position:relative;
}
.list
{
position:relative;
min-height:10px;
margin-left:20px;
margin-bottom:30px;
}
button{clear:both;}
HTML:
<footer>
<div class="foot">
<ul>
<span class="facebook"></span>
<span class="instagram"></span>
</ul>
</div>
</footer>
CSS:
.facebook {
display:block;
background-image:url("../images/facebook.png");
height:64px;
width:64px;
}
.instagram {
display:block;
background-image:url("../images/instagram.png");
height:64px;
width:64px;
}
.social {
height:64px;
width:64px;
display:inline-block;
position:relative;
margin:0 auto;
}
footer {
height:75px;
width:inherit;
bottom:0;
position:fixed;
}
.foot {
text-align:center;
}
The way I'm going about it could possibly be the wrong way. Any direction/advice would be great. I've tried using z-index and other properties but just nothing is working. I kinda wonder if it has to do with positioning/display inline.
A <span> should not contain any display:block elements anyway, it was designed for inline content although you can use it your way. Try use the <img> tag instead.
And wrap all your lines inside lis because you are using an ul
The links worked for me with no trouble.
You don't even need the span. You can move the class to the <a and have either 2 (social & facebook), or just make it to one css each with the inline and margin.
A span can have display:block property, but why you add span if you have your link ? I cleaned up your html :
HTML
<footer class="foot">
<ul>
<li></li>
<li></li>
</ul>
</footer>
and CSS
.social-facebook {
background-image:url("../images/facebook.png");
}
.social-instagram {
background-image:url("../images/instagram.png");
}
.social {
height:64px;
width:64px;
display:block;
margin:0 auto;
}
.foot {
height:75px;
width:inherit;
bottom:0;
position:fixed;
text-align:center;
}
I removed properties repetition and add a little bit of OOCSS :)
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