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
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>
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.
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
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
Actually I want to give hover to div which is inside hyperlink but I don't know how to in css.
These divs actually have background images attached to them in css.
<div class="header_menu">
<div class="foa_logo"><img src="images/FOA-Logo.jpg"/></div>
<div class="address"></div>
<div class="home"></div>
<div class="about"> </div>
<div class="services"></div>
<div class="contact"></div>
</div>
div {
width:100px;
transition: width 2s;
}
div:hover {
width:200px;
}
replace div with .foa_logo if you want to select just that class.
I've created a jsfiddle for you showing how to do the hover you want. I removed the divs in the hyperlinks, because they are not useful. You can simply set the styles for the a tags and then you get your hovers
http://jsfiddle.net/FHWb6/
.header_menu a {
display:block;
height:40px;
width:100px;
line-height:3;
text-align:center;
font-family:Arial;
font-size:14px;
text-transform:uppercase;
float:left;
position:relative;
background:url(); /*put your image here*/
background-color:#CC0;
color:#FFF;
text-decoration:none;
}
.header_menu a:hover {
background:url(); /* put your hover image or position here */
background-color:#ececec;
color:#000;
}
I added some extra code in there just to do some base level styling - color, height and width will most likely change for you.
Try this:
element:hover {
property: value;
}
By this, you can change the CSS properties of the elements when they are hovered over!
So for you, you will try it as:
.home:hover { // on the home div..
// all the changes here
}