I have a div "actions" inside a div which is hidden by default. I want it to show when the mouse hovers over the div. How can I do this?
<div class="tile">
<div class="actions">hello</div>
</div>
Use CSS:
.tile:hover > .actions {
display:block;
}
See this fiddle
Handle it by css
.tile:hover .actions{
display:block;
}
Related
My question is related to CSS overflow-y:visible, overflow-x:scroll
but I am still not able to solve my problem. I want a scrollable sidebar on y-axis with a visible tag hanging on the x-axis.
My HTML setup:
<div>
<ul>
<li>
</li>
<li>
<div> ... //want it to be visible x
</div>
</li>
</ul>
</div>
CSS:
I tried to use this:
.div { overflow-y:scroll; overflow-x:visible; }
.li { position:relative; }
.div { position:absolute; top:0px; left:-100px; display:inline-block; }
Generally if you want the to view the scroll in the div you should use
overflow-x:scroll;
Please make sure to add a class otherwise the scroll will appear in the outer div too, Or use the hierarchy.
div ul li div{ overflow-x:scroll }
.my-div-scroll{ overflow-x:scroll }
I can not get my yellow background color to show up with the nested divs that show up in 3 separate columns. What am I doing wrong?
<div id="wrapper">
<div class="rightside">
Test
</div>
<div class="rightside">
Test
</div>
<div class="rightside">
Test
</div>
</div>
CSS below:
#wrapper {
background-color: yellow;
}
div.rightside {
width: 31%;
margin: 0 1.33333em 0 0;
display:inline;
float:left;
}
Here is my jsfiddle: http://jsfiddle.net/yPX5Q/2/
Thanks
Cheers
Add overflow:auto to your wrapper div
#wrapper {
background-color: yellow;
overflow:auto;
}
jsFiddle example
Floating the inner divs essentially gives the wrapper div no height. By adding the overflow:auto it brings back the expected behavior.
you can set overflow:hidden; http://jsfiddle.net/yPX5Q/3/ on the parent container or use a clearfix method with a pseudo element or extra element.
More info about floatting elements here : http://css-tricks.com/all-about-floats/
Ok so I have a an anchor element within a div with a fixed width, the anchor element needs to remain inline because the text that it holds is dynamic and it has a background because it is a button. I want the background of the button to only be the size of the length of text too. Is there a way to do so?
<div class="wrap">
<a class="button>Start »</a>
</div>
.wrap{
width:900px;
background:white;
}
a{
display:inline;
background:black;
}
I think
.wrap{
width:900px;
text-align: center;
}
will do the trick
See
http://jsfiddle.net/jEsRG/3/
I have a menu with several div. Every div has a 1px left border. On hover, I change the background of the current div, but as you can see with the following JSFiddle, it's ugly that the previous (grey) border is still visible.
I would like to hide it when I'm on the current selected div. Any ideas?
Fiddle
<div id="main_menu">
<div class="menu_item"><div class="link">Example</div></div>
<div class="menu_item"><div class="link">Example</div></div>
<div class="menu_item"><div class="link">Example</div></div>
<div class="menu_item"><div class="link">Example</div></div>
</div>
To make it more clear, from this:
To this:
Possibly without using any JS.
Change your .menu_item hover css to this:
#main_menu .menu_item:hover {
background-color:#00437f;
cursor:pointer;
position:relative;
left:-1px;
}
and to maintain text at its position update below css:
#main_menu .menu_item:hover .link {
color:#fff;
border:0px;
position:relative;
left:1px;
}
So i need to make a div a link, and have the background colour change when hoverng over this div with the mouse. The problem is, this div has two child divs inside it and when i move the mouse in to the bounds pf the parent div it is actually on a child div. So while i can make it so that one of these child divs changes on hover the second one does not.
So i guess my question is, is there a way to make both child divs change when hovering one using css?
I dont mind changing code to use tables if thats easier but I need to find some way to make the entire div / tr change when hovering on one child / td.
What im actually looking to create here is something almost the same as th youtube recommended videos boxes (on teh right of the page)
Thanks in advance
CSS
#parent {
width: 318px;
height: 90px;
background-color: #FFFFFF;
margin: 5px 0px 5px 0px;
font-size: 10px;
}
#parent :hover {
background-color: #0000ff;
}
#child1 {
width:120px;
float:left;
}
child2 {
width:188px;
float:right;
}
HTML (with some other stuff)
<c:forEach var="item" items="${list}">
<a href="webpage?item.getinfo()">
<div id="parent">
<div id="child1">
<img src="img.jpg">
</div>
<div id="child2">
${item.getinfo2()} <br>
${item.getinfo3()} <br>
</div>
</div>
</a>
</c:forEach>
Code is something like that. Ive been hacking it up for the last while but that was something like what i had before
If the one you're able to hover over is the first, you only need CSS:
.mavehoverable > div:hover, .makehoverable > div:hover + div {
background-color: red;
}
With this HTML:
<div class="makehoverable">
<div>Child 1</div>
<div>Child 2</div>
</div>
Hovering over Child 1 will also highlight Child 2. Vice-versa doesn't work in CSS though, so that would need some JS.
I think you might just need to fix a line of your CSS. Change:
#parent :hover {
background-color: #0000ff;
}
to:
#parent:hover {
background-color: #0000ff;
}
That seemed to work for me.
Have you tried using jQuery? You could do something like this:
http://jsfiddle.net/UtdYY/
Html:
<div class='color'>
<div class='color child'>test123</div>
<div class='color child'>test456</div>
</div>
Javascript:
$('.color').hover(function(){ $(this).toggleClass('red'); });
CSS:
.red { color:red; }
.child {height: 50px; }
Edit: Cleaned up the javascript, thanks elclanrs
Try this http://jsfiddle.net/rsarika/rtGw5/1/