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
Related
i have a lightbox image inside a div of a scrollable page.
I use everything in % so that every image adjusts to the screen size whether it is mobile or destkop.
The thing is that when I visit my site in mobile and I click in the lightbox, it appears at the bottom of the page! How can I set the position of the lightbox to appear in front of the clickable image?
My HTML is:
<input type="checkbox" id="check" style="display:none;">
<label for="check">
<div id="biteme"><img src="biteme.png"></div>
</label>
<label for="check">
<div id="cover">
<div id="box">
<img src="promociones.png" width="80%">
</div>
</div>
</label>
And my css is:
#biteme {
padding-top:0;
padding-bottom:0;
}
#check:checked ~ label #cover{
display:block;
background:none;
}
#cover{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:none;
display:none;
}
#box{
position: inherit;
top:313%;
bottom:0;
left:16%;
right:0;
margin:auto;
width:80%;
height:auto;
border:none;
opacity:0.9;
background-color:transparent;
background:none;
}
If you can switch them places that will work. You can use z-index to reorder boxes too.
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 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
This is my code :
HTML :
<div class="container">
<div class="myBox">My Text</div>
<a class="myLink" href="http://www.google.com"> </a>
</div>
CSS :
.container
{
position:relative;
width:200px;
height:200px;
}
.myBox
{
position:absolute;
top:0;
left:0;
z-index:90;
background-color:#ff0000;
width:200px;
height:200px;
}
.myLink
{
text-decoration:none;
display:block;
position:absolute;
width:50px;
height:50px;
top:0px;
left:0px;
z-index:100;
}
on IE7, the link over "My text" doesnt work as link. If, on myLink I put a background-color, it works as well.
Am I on drugs or it is a normal behaviour? And how can I fix this with a transparent background?
Try to add these lines to .myLink:
background-color:#ff0000;
filter: alpha(opacity=0);
EDIT
If there will be only an image in .myBox, .myLink will work as expected, if the image is added as a background image to .myBox.
I am trying to create a little growl like div for a site. It works great in Firefox, but not IE6 (haven't tried IE7, but I still need to support IE6).
In Firefox: Centered text with image floated to right side of div
In IE6: Centered text with image to the left of text.
I've tried switching the img and span tag order, but that causes a line break in FF between the two, and IE renders the image on the right of the text, but not docked to the right side of the div.
HTML
<div id="growl">
<img src="close.gif" class="action" title="hide" />
<span class="text">Grrrrrr.......</span>
</div>
In css:
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl > .text {
font-size:120%;
font-weight:bold;
}
#growl > .action {
float:right;
cursor:pointer;
}
The > selector does not work on IE 6.
Just get rid of it:
#growl .text {
font-size:120%;
font-weight:bold;
}
#growl .action {
float:right;
cursor:pointer;
}
The > css selectors are not supported by IE6, try just removing them.
No point in adding a class to each elements in the div when you only have one img and span. Do this instead for cleaner code.
<div id="growl">
<img src="close.gif" title="hide" />
<span>Grrrrrr.......</span>
</div>
-
#growl {
background-color:yellow;
text-align:center;
position:absolute;
top:0; left:0;
width:98%;
padding:10px 0;
margin-left:1%;
z-index:10;
border:1px solid #CCCCCC;
}
#growl span {
font-size:120%;
font-weight:bold;
}
#growl img {
float:right;
cursor:pointer;
}