I'm been learning for web design as well as development for quite some time now but I'm still stumped by some basic rules of CSS.
I'm trying to figure out how the behavior of :hover works when hovering one element, to affect another. But I came across something unexpected...
Q: Why does element .one turn black when .two is hovered?
Here's the code and the fiddle.
HTML:
<div class="one">
<div class="two"></div>
</div>
CSS:
div {
width: 100px;
height: 100px;
position: absolute;
top:0;
}
.one {
left:0;
background: red;
border: 5px solid black;
}
.two {
left:200px;
background: yellow;
}
.one:hover {
background: black;
}
here is my jsFiddle
Help anyone?
The element .two is found inside the .one element. so hovering .two means that you are also hovering .one. The event "bubbles" up to the parent element.. even if it doesn't look like that visually. To hover each one independently you will have to take .two out of .one. You might want to wrap both in a container to properly set their positioning. working jsFiddle
<div class="someContainer">
<div class="one"></div>
<div class="two"></div>
</div>
You have to change your html structure to achieve this.
As right now div having class two is inside the div class one so two is becoming child of class one div so when you hover on div which have class two it automatics consider that you are hovring on class one div as well.
Use absolute div and don't make it child of class one div.
Related
Is there any way how to hide child inside parent and show after he runned away from div ?? I am using anymation, transform - translate from (100%,0) to (0,0), but during moving, this div overlaps the parent div.. and i cant use z-index because of child. Child cant go upper in layer then parrent... so is there any other way? How to show child only out of parent div ?
I am making dynamic menu with anymation, and i want after click on link show subMenu just next to
you want something like this ? use overflow:hidden on parent or if you want the child to be visible use overflow:visible
you can set animation instead. it still works like the example below
let me know if it helps
.parent {
width:100px;
height:100px;
border:2px solid black;
overflow:hidden;
}
.child {
width:100px;
height:96px;
border:2px solid red;
opacity:0;
transition:0.5s;
}
.parent:hover .child {
transform:translateX(30px);
opacity:1;
}
<div class="parent">
<div class="child">
</div>
</div>
Have a parent div and 3 child div's. Know the height of child2 only. Want the child1 and child3 to have the same height as height getting reduced. Also border of the parent is collapsing. Want the border of parent to be visible around the child.
Pasted the code http://jsfiddle.net/586Cr/
Provided the code below.
<html>
<head>
<style>
#parentt{
background-color:#000000;
border:4px solid #0000FF;
}
#child1{
background-color:#000000;
border:4px solid #FF0000;
float:left;
width:25%;
}
#child2{
background-color:#000000;
border:4px solid #FF0000;
float:left;
width:30%;
height:100px;
}
#child3{
background-color:#000000;
border:4px solid #FF0000;
width:25%;
float:left;
}
.trans60 {
zoom: 1;
filter: alpha(opacity=60);
opacity: 0.6;
}
.trans100 {
zoom: 1;
filter: alpha(opacity=100);
opacity: 1.0;
}
</style>
</head>
<body>
<div id="parentt">
<div id="child1" class="trans60"> child1</div>
<div id="child2" class="trans100">child2</div>
<div id="child3" class="trans60">child3</div>
</div>
</body>
</html>
Give overflow:hidden to your parent here the fiddle because child's are floating.
Briefly
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Setting overflow: hidden on an element causes a new float context to be created, so elements that are floated inside an element that has overflow: hidden applied are cleared.
Ok let's start off!
Anytime you float, it tends to break the parent. I know, children leave the parents broke.. it's just a habit we have in nature.
To fix this, I always make a class called 'clear' and just attach a div when I want to do clearing! I find this to be more useful than doing an overflow: hidden, as the clear class can be reused nearly any and everywhere.
//css
.clear { clear: both; }
// calling it up after the 3 children
<div class="clear"></div>
Ok, so that fixes that problem.
Now to do the div height, that's not overly complicated with some jQuery.
Now I could go on trying to explain this, but it would take a minute. Follow this tutorial:
Demo:
http://www.cssnewbie.com/example/equal-heights/plugin.html
Article:
http://www.cssnewbie.com/equalheights-jquery-plugin/#.UoX-neKrTIU
However, instead of on click, do it at document ready.
Div highlighting question
I have 2 divs stacked on top of each other inside a container.
Here is the behavior I want: when you mouseover the top div, nothing happens. when you mouse
over the bottom div, the top div background changes color, and the bottom div's background
changes a different color. In the sample code I tried, mousing over the container div makes
the top turn green and the bottom turn vlueviolet. I want a mouseover on the bottom to cause
this behavior, but I want a mouseover on the top to do nothing. I feel like I could get this
done in jQuery using a parent selector or something, but it seems like I should be able to
do this in pure CSS. Thanks!
Here is what I've tried, which of course doesn't work, but gives an idea of what I'm trying to do.
<html>
<head>
<style>
div
{
display:inline;
border:1px dotted black;
font-family:Courier;
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
div#outer:hover #top{
background:green;
}
div#outer:hover #bottom{
background:blueviolet;
}
div#top:hover, div#bottom:hover{
background:white;
}
</style>
</head>
<body>
<div id=outer>
<div id=top>
top
</div>
<br>
<div id=bottom>
bottom
</div>
</div>
</body>
</html>
I changed up your CSS a little bit. Basically to make it bigger.
The order is important here.
This is not perfect due to the outer div's border.
<style>
div {
border:1px dotted black;
font-family:Courier;
background:white;
}
div#top, div#bottom {
height: 200px;
width: 200px;
}
div#outer:hover #bottom:hover {
background:blueviolet;
}
div#outer:hover #top {
background:green;
}
div#outer #top:hover{
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
</style>
Is this what you're looking for?
div#outer:hover div#top:hover, div#bottom:hover{
background:white;
}
Alternatively, you could also use !important:
div#top:hover {
background: white !important;
}
I don't think you can do this... CSS selection only works one way, from parent to child or in cascade.... so you can only change the CSS of divs below another div.
For example look this jsFiddle: as you can see, only the bottom divs' style can change.
This code
div#fourth:hover ~ #first{
background:green;
}
doesn't work because the "first" div is above the "fourth" div...
Anyway, if you want to set the background of top div to white, you will see a rollover with the delay.
PS: Sorry for my bad English.
I've been searching for hours but I can't find a way to place 2 div's next to each other.
The below example works fine when the div's are smaller then the screen but when they are bigger then the screen they are below each other.
Also I would like the same classes for 2 pages:
1 page they both fit on the screen and I'd like to display them next to each other (not one on the left and one on the right)
the other page together they are bigger then the screen. (Sideways scrolling is no problem)
Take this example:
<style>
.wrapper
{
border:1px solid Red;
display: inline-block;
}
.left
{
float:left;
color: Green;
border:1px solid Green;
}
.right
{
float:right;
color: Blue;
border:1px solid Blue;
}
</style>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
In the actual design ASDF is replaced by a big <table>.
As I said above I've been searching for hours but can find a solution so I'm sorry if this has been asked before.
The wrapper div isn't necessary for the two to be lined up, but if you have it for other reasons (like a border, background, etc.), then it does not need to be set to inline-block.
Nothing technically needs to float. inline-block has the same effect and is more appropriate. Having said that, one float is needed to make things as fluid as possible and will be mentioned in a second.
Something that makes this and other css magic involving inline-block tricky and error-prone is that the element is treated in some ways like an inline element and in other ways like a block. This is not cross-browser consistent. Generally, this means that it can have block-level styling (like border, and width), and inline-level styling. Generally people just think of it as blocks that fall horizontally, "in a line". But inline element properties from a wrapper div such as font-size and white-space come in to effect as well (which is just annoying).
Having said all of that, here is the bare-bones recipe for side-by-side block elements that exceed the browser window and are inside of a block-level wrapper:
The inner blocks need to be set to inline-block.
The outer wrapper needs to have white-space set to nowrap, just as if you wanted a long line of text to expand horizontally beyond the browser window.
The outer wrapper needs to be set to float: left; clear: both;, because otherwise the wrapper's width will not go past the window width. The alternative is to set the width of the wrapper, but if you don't know how far it will expand, the float will force the wrapper to automatically shrink or grow to the width of it's contents. The clear:both prevents the floating from affecting any surrounding elements.
So for the following HTML:
<div class="wrapper">
<div class="left">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
<div class="right">ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF</div>
</div>
You would need the following CSS as a bare minimum:
.wrapper {
white-space: nowrap;
float:left;
clear: both;
}
.left, .right{
display: inline-block;
}
And then, for your example, you would add:
.wrapper {
border: 1px solid red;
}
.left
{
color: Green;
border:1px solid Green;
}
.right
{
color: Blue;
border:1px solid Blue;
}
Demo: http://jsfiddle.net/crazytonyi/jTknm/
This is one approach that could be used, coupling white-space: nowrap in the parent .wrapper element with display: inline-block in the child .left and .right elements:
.wrapper
{
/* other stuff */
white-space: nowrap;
}
.left
{
display: inline-block;
/* other stuff */
}
.right
{
display: inline-block;
/* other stuff */
}
JS Fiddle demo.
You can do this without floating by setting the inner divs to display: inline-block and letting the outer div have white-space: nowrap:
<div class="wrapper">
<div class="left">left</div><div class="right">right</div>
</div>
.wrapper { border: 1px red solid; white-space: nowrap }
.wrapper div { display: inline-block; width: 70% } /* 2*70% = 140% of .wrapper */
See it in action.
Be careful to not leave any whitespace between closing the first and opening the second div, because that will manifest as visible space in the render.
Erm, you need to use float:left for both them to begin with. Then force overflow:show for the wrapper or perhaps use the newer CSS 3 property overflow-x:scroll. Let me know if it still doesn't work.
Okay I have tested for you. The reason why this is not working is because you haven't specified fixed widths and some other stuff. Here is the working code:
<style>
.wrapper
{
border:1px solid Red;
width:100%;
overflow-x:scroll;
}
.left
{
float:left;
width:500px;
color: Green;
border:1px solid Green;
}
.right
{
float:left;
width:500px;
color: Blue;
border:1px solid Blue;
}
</style>
<body>
<div class="wrapper">
<div class="left">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="right">
ASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDFASDF
</div>
<div class="clear" />
</div>
Then if you want to specify widths, either use Javascript to determine them on page load or use CSS.
Your divs need widths, try:
<div id="left"><p>Some content here...</p></div>
<div id="right"><p>Some content here...</p></div>
<style>
#left, #right { float:left; color: Green; border:1px solid Green; width:49%; }
#left { margin-right:1%; }
</style>
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/