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
Related
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>
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
so i have a situation where i want text to appear over an image using visibility:hidden/visible and also playing with opacity. i cannot do it for some reason. Note that this is in a list because i have other images displayed in the same list but here i am only showing one. below is the html:
<ul>
<li>
<a class="pic" href="#">
<img alt="" src="/servlet/servlet.FileDownload?file=00PU00000096kH2MAI" style="width: 300px; height: 160px;" />
</a>
<div class="hovertext"> my hover text</div>
</li>
</ul>
and the css is here:
#gallery ul{
margin:0;
padding:0;
list-style:none;
}
#gallery li{
display:block;
float:left;
width:310px;
height:170px;
margin:0 15px 15px 0;
}
#gallery li a{
display:block;
float:left;
width:300px;
height:160px;
margin:0;
padding:4px;
}
#gallery li a:hover {
color:#FFFFFF;
opacity:0.6;
background-color:#666666;
}
#gallery li a:hover .hovertext{
visibility:visible;
}
.hovertext{ width:300px; height:85px;
background-color:#666666;
opacity:0;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
all this does is allow me to see that the image is opaque and i can see that the div is in the background but i just cannot bring it forward to display in front of the opaque text. Any help would be greatly appreciated.
Look at the following code.
#gallery li a:hover .hovertext{
visibility:visible;
}
The above code will look the child element of hovertext when you hover the link. In your case, it is siblings element. So update your CSS like below.
#gallery li a:hover + .hovertext{
visibility:visible;
}
Also you have added opacity:0 for hovertext class. I think there is no need for that one. Because already you have visibility:hidden for the same class. So update your CSS like below.
.hovertext{ width:300px; height:85px;
background-color:#666666;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
DEMO
I'm trying to float span and ul next to each other but without fixed width it wont float to each other horizontal but instead act like float wasen´t applied and stack vertical. When i set fixed width and remove display:inline-block from updates-documents-holder-inside it will appear to act as intended in first place. http://jsfiddle.net/Jx3dv/ to show the problem.
<div class="updates-documents-holder">
<div class="updates-documents-holder-inside">
<span><div></div></span>
<ul>
<li>Flytt av sopor.doc</li>
<li>5FSE 0000 000</li>
<li>Har blivit uppdaterad</li>
<li>2014-28-15</li>
</ul>
</div>
Css
.updates-documents-holder{
float:left;
width:23.8em;
height:5em;
text-align:center;
}
.updates-documents-holder-inside{
display:inline-block;
}
.updates-documents-holder-inside > span{
display:block;
float:left;
background:green;
}
.updates-documents-holder-inside > span > div{
display:block;
height:50px;
width:50px;
}
.updates-documents-holder-inside > ul{
display:block;
float:left;
text-align:left;
list-style:inside;
padding-left:1em;
background:red;
}
http://jsfiddle.net/aibrean/jSZyh/3/
Here's a fiddle. Mixing floats and block elements is the cause of the problem. They don't play nice together.
Updated CSS code:
.updates-documents-holder-inside > span{
display:inline-block;
background:green;
}
.updates-documents-holder-inside > span > div{
display:inline-block;
height:50px;
width:50px;
}
.updates-documents-holder-inside > ul{
display:inline-block;
text-align:left;
padding-left:1.5em;
background:red;
}
You don't have to apply any fixed width. Just remove display:inline-block from the container div.updates-documents-holder-inside,
So that both the elements have enough space to sit next to each other.
Updated Fiddle
the goal is to make my linkIcon background change background images when I hover my mouse over it. It works completely fine in chrome, but in firefox and safari nothing changes when I hover my mouse over the linkIcon unless I have my mouse button down when my mouse moves on top of the div. I can't figure out what the difference is.
Html:
<div id="tab" >
<div id="swingDownButtonContainer">
<a href="javascript:slideLinks();" style="display:block; position:relative;">
<div id="linkIcon">
</div>
</a>
</div>
</div>
Css:
#tab {
z-index:-1;
background-color:#f0996f;
position:absolute;
left:-10px;
height:20%;
width:50px;
border-radius:10px;
top:40%;
}
#swingDownButtonContainer {
text-align:center;
}
#linkIcon {
z-index:2;
background-image:url('media/circles_noHover.png');
background-size:40px 57px;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
width:40px;
height:60px;
position:absolute;
left:10px;
}
#linkIcon:hover {
background-image:url('media/circles_Hover.png');
}
You're probably finding your link has no height as it's contents are absolutely positioned. Can you change it to:
<div id="tab" >
<div id="swingDownButtonContainer">
<a id="linkIcon" href="javascript:slideLinks();">
</a>
</div>
</div>
CSS edit:
#swingDownButtonContainer {
text-align:center;
position: relative;
}
Alternatively give the link a height of 60px