Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
How can I change div bg color From when I mouse over the another div...??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.Div1{width:100px; height:100px; background-color:red; float:left; margin-right:30px; }
.Div2{width:100px; height:100px; background-color:#00C; float:left }
</style>
</head>
<body>
<div class="Div1">asdlsakd</div>
<div class="Div2">asdsa</div>
</body>
</html>
I want to change color of div1 to yellow when i mouse over the div2 how can I???
This is my fiddle link : http://jsfiddle.net/anupkaranjkar/S5Yu5/
jQuery way:
Try to use jQuery .show(); and .hide(); function.
HTML:
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
CSS:
#div1{
width:100px;
height:100px;
background-color:red;
}
#div2{
width:100px;
height:100px;
background-color:blue;
display:none;
}
jQuery:
$("#div1").hover(function() {
$("#div2").show();
},
function() {
$("#div2").hide();
});
Don't forget to link to jquery.min.js.
Add <script src="http://code.jquery.com/jquery-latest.min.js"></script> to your <head></head> tag. Otherwise it won't work.
Have a look at this fiddle
EDIT:
Pure CSS:
Put a container around your divs like this:
<div id="content">
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
</div>
after that you can use :first-child and :hover in this way:
//styling your divs
#div1{
width:100px;
height:100px;
background-color:red;
}
#div2{
width:100px;
height:100px;
background-color:blue;
display:none;
}
//hover function
#content > div:first-child{
display:block;
}
#content > div:hover + div {
display:block;
}
If you want to see it in practise have a look at this demo
As the users above state, you should use :hover to achieve that. However they gave you an example what to do when you hover the div itself.
Your question was how to change the color if you went Hover the other div, so heres the code, this however implies that the second div is nested into the first div:
Div1:hover Div2 {
background-color: yellow;
}
Here is an example which is achieved with JQuery where it doesn't matter if they are nested or not:
var defaultBackground = $("div#two").css("background-color");
$( "div#one" )
.mouseover(function() {
$("div#two").css("background-color", "yellow");
})
.mouseout(function() {
$("div#two").css("background-color", defaultBackground);
});
http://jsfiddle.net/d58Rb/
To match your HTML code, i updated the JSFiddle:
http://jsfiddle.net/S5Yu5/1/
Just in case anyone else ever needs this solution (I don't see it anywhere)
This is possible using CSS/HTML, but only if the divs are directly below eachother.
#Div1:hover + Div2 {
background-color: yellow;
}
Use Like this:
<div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
Hello World!
</div>
What you need is :hover
Div1:hover {
background-color:yellow;
}
You can do it simply with css
Div1:hover {
background-color:yellow;
}
OR
with JQuery
$("div").hover(function() { // mouseenter
$(this).addClass("hover");
}, function() { // mouseleave
$(this).removeClass("hover");
});
css
.hover {
background-color:yellow;
}
Select and style every element that are placed immediately after elements:
.first:hover +div{background:red;}
<div class="first">
some
</div>
<div>other</div>
Example2
.first:hover div{background:red;}
.first{border:1px solid blue;width:100px;height:100px}
<div class="first">
<div>other</div>
</div>
No need to make a div2 to achive this.
Div1{width:100px; height:100px; background-color:red; }
Div1:hover{width:100px; height:100px; background-color:blue; }
Just apply :hover pseudo selector to your existing div1 and you will get the hover effect.
Related
Is it possible to load a external css "specific some lines" in a html?
For example : I have a page with some div, and i want the page load only specific some lines from css, not entire css, see snippet below. Are there have some way to show only div1 and div2 style, not all four ?
.class1 {
background-color:#FC0;
width:300px;
height:50px;
}
.div1 {
background-color:#CCC;
width:300px;
height:50px;
}
.class2 {
background-color:#F00;
width:300px;
height:50px;
}
.div2 {
background-color:#FFC;
width:300px;
height:50px;
}
<div class="class1">class1 text (I don't want this css)</div>
<div class="div1">div1 text</div>
<div class="class2">class2 text (I don't want this css)</div>
<div class="div2">div2 text</div>
Separate your css files, and link to only the css file containing the css you need.
The following works in some browsers but not in IE:
Expected result: By default, Blue div covers image... however mouse hover over any visible part of image brings entire image forward (in front of blue div).
http://jsfiddle.net/NUz3M/
CSS:
.container { position:relative; }
.bigpic { position:relative;width:300px;height:300px; }
.bigpic img { z-index:2; position:relative; }
.bigpic img:hover { z-index:10; }
.shade { z-index:3;
position:absolute; top:20%;left:0;
width:100%; height:200px;
background-color:blue; }
HTML:
<table>
<tr>
<td class="container" >
<div class="bigpic">
<img src="http://s8.postimg.org/xhqgtehlh/sample.jpg" />
</div>
<div class="shade"></div>
</td>
</tr>
</table>
Any ideas? suggestions? Trying to stay away from Javascript for this.
Thanks!
This is based on information from the link by #showdev. If the parent z-index is changed on hover instead of the image, it works.
.bigpic:hover { z-index:10;} rather than .bigpic img:hover { z-index:10;}
jsfiddle.net/sMg7a/1/
You do need to make a little more effort reading the links given in your comments.
P.S. Tested in IE 10.0(.9200.16721)
Let me preface this question with the warning that I'm a self-taught (amateur) web developer (and not a very good one). I've been trying for a long time to find an effective way of centering web pages using AP Divs. I've tried setting "margin: 0 auto;" and I've tried setting "margin-left: auto;". Both work for that one div. But I then have to use that as a wrapper to design within, so when I put more divs inside that, they don't center.
I may be completely approaching this wrong; if so, please correct me. Code (not working) for a basic version of what I want to do is below. If you run that code, if I were to place, say, an image in apDiv1, it would scale to the page size fine; but the text in apDiv2 does not.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Page</title>
<style type="text/css">
#apDiv1 {
margin: 0 auto;
width:600px;
}
#apDiv2 {
position:absolute;
width:50px;
height:24px;
z-index:1;
left: 47px;
top: 29px;
}
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2">Hello</div>
</div>
</body>
</html>
I can center a div inside another div just fine using margin-left:auto; and margin-right:auto;:
Working example: http://jsfiddle.net/xjKhT/
In my own opinion, it is not good to use appdivs(coz it depends on how you positioned it on the design). You can do it(centering stuffs) on your own, check this:
Centering(Simple Sample)
<style>
#header {
margin:auto;
width:600px;
background:#000;
padding:5px;
}
#title {
width:50px;
margin:auto;
background:#CCC;
padding:5px;
}
</style>
<div id="header">
<div id="title">Hello World</div>
</div>
Custom AppDivs adds extra styles which is not really necessary:)
Updated example
Ok after some guessing and poking I think you mean that you want to absolutely position the elements inside the center-aligned wrapper.
position: absolute will be absolute to the page UNLESS the parent has position: relative.
#apDiv1 {
margin: 0 auto;
width:600px;
position:relative;
}
Can someone explain how to code the feedback button seen on foursquare.com? It's a vertical button on the side of the webpage and it opens a new window and dims out the background. I've seen this on some other sites as well. Thanks in advance.
How they did it...
The button is provided through the http://getsatisfaction.com service. This service is similar to other services like http://sharethis.com which exist to minimize the programming required to create a fully-rounded website. Essentially you setup an account (I'm assuming...) and they provide you with a javascript code-block that you include in your projects, which causes the vertical-button to appear on your site.
Do it yourself...
This wouldn't be that difficult the do yourself. I quickly worked up a jQuery example. Suppose we have the following markup:
<div id="feedback">
<p>Here is where you would have your form.</p>
<div class="toggler">?</div>
</div>
.toggler will be our button in this case. We'll want to place it outside of the feedback box with some css, and also place the feedback box with some css too:
#feedback { position:absolute; left:0; width:200px; padding:10px;
background:red; color:white; }
.toggler { width:25px; height:50%; color:white; background:blue;
text-align:center; position:absolute; top:25%;
right:-25px; cursor:pointer }
This could be cleaned up a bit. But now that we have our elements, we can add some toggle-logic with jQuery:
$(function(){
// When the user clicks on .toggler
$(".toggler").click(function(e){
// Get a reference to our feedback box
var feedback = $("#feedback");
// If it's in the process of being opened (or is opened)
if ( $(feedback).hasClass("opened") ) {
// Close it
$(feedback)
.removeClass("opened")
.animate({"left":0}, 1000);
} else {
// Else, Open it
$(feedback)
.addClass("opened")
.animate({"left":-$(feedback).outerWidth()}, 1000);
}
});
});
Online demo: http://jsbin.com/iyenu4
Have a look at jquery and the jquery UI javascript library for implementing those kinds of interavtive features.
Here is an example: http://wpaoli.building58.com/2009/08/jquery-animated-feedback-tab-thingy/
Looks like they're using the Lift modal dialog for the popup and background dimming.
The button is probably positioned using CSS fixed positioning. Fixed positioning means that it remains in the same place on the screen, not on the page. This allows it to 'float" over the text even when you scroll.
The popup dialogue is the same. Clicking on the button toggles the display CSS property between none and something other than none, probably block.
The gray background, I'd guess is created with a big fixed position <div> with width:100% and height:100% and some opacity.
Try this:
HTML
Save this as example.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Example</title>
<link rel="stylesheet" href="example.css" type="text/css" />
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<h1>Example</h1>
<a id="clickhere">Click here for the popup!</a>
<div id="main">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
<form id="popup" class="dialog" action="#">
<div id="popupbackground"></div>
<div class="dialog">
<h2>Popup!</h2>
<a id="closepopup">Click here to close this dialog</a>
</div>
</form>
</body>
</html>
CSS
Save this as example.css:
html {
height:100%;
}
body {
height:100%;
}
form.dialog {
height:100%;
width:100%;
position:fixed;
top:0px;
left:0px;
text-align:center;
padding-top:10%;
display:none;
}
form.dialog div.dialog {
width:400px;
background-color:gray;
margin:auto;
text-align:left;
border:2px solid black;
padding:10px;
position:relative;
z-index:10;
}
form.dialog label {
display:block;
}
form.dialog input {
width:99%;
}
form.dialog textarea {
width:99%;
height:200px;
}
a {
cursor:pointer;
text-decoration:underline;
font-weight:bold;
}
#popup #popupbackground {
background:gray;
opacity:0.4;
filter:alpha(opacity=40);
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
}
JavaScript
Save this as example.js:
window.onload = function() {
document.getElementById("clickhere").onclick = function() {
document.getElementById("popup").style.display = "block";
};
document.getElementById("closepopup").onclick = function() {
document.getElementById("popup").style.display = "none";
};
};
The idea is that the <form> consumes the whole screen, because of the width
and height properties in the form.dialog rule. Since that rule also specifies a fixed position, the user can never scroll away from the contents of this <form>. We can then center the <div class="dialog"> using a margin:auto, so it floats, centered on the page. The <div id="popupbackground"></div> provides a faded gray backdrop.
So I have used - http://www.roundedcornr.com/ - to generate some rounded corners via CSS. Great - works fine, no probs.
However! I am now really stuck trying to do "hover" rounded corners. I basically got the generator to generate the corners in a lighter color (for the hover) and now have no idea how to implement the lighter hover ?
Does anyone know how to do this in CSS/HTML only ? It should be 100% possible I am just a little unsure.
I only gave the website a short peak and basically they provide you with a couple of PNGs. Not bad, however not the best solution in all cases. Since the current CSS standard doesn't support rounded corners and beside Firefox/Mozilla no one understands this:
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
I think you are stuck with only one option. Choose a constant height and width for your element and create ONE png out of it. You can than create something like this
span{
display:block;
width:100px; height:100px;
background-image:url("nice.png");
}
span:hover{
background-image:url("nice_hover.png");
}
Why do I think there is no other way? Because you only can effectively change the attributes of one element at a time with the "hover" effect. Hopefully CSS3 will give us rounded corners... However if you make use of JavaScript this is a completely different story..
Update
I thought about it and I probably flopped in presenting you all the available options. Here is a working solution for IE7+, FF, Opera that achieves exactly what you are looking for. Just replace the color with some background-image. Sorry!
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Floating</title>
<style type="text/css">
.content p{
position:relative;
height:100px;
width:400px;
border:1px solid black;
}
.content p span{
position:absolute;
}
.content p .span1{
left:0;
top:0;
}
.content p .span2{
right:0;
top:0;
}
.content p .span3{
left:0;
bottom:0;
}
.content p .span4{
right:0;
bottom:0;
}
.content p:hover .span1{
background-color:red;
}
.content p:hover .span2{
background-color:blue;
}
.content p:hover .span3{
background-color:green;
}
.content p:hover .span4{
background-color:yellow;
}
</style>
<body>
<div class="content">
<p>
<span class="span1">1</span>
<span class="span2">2</span>
<span class="span3">3</span>
<span class="span4">4</span>
</p>
</div>
</body>
</html>
I would recommend doing this in JavaScript, this will then allow for variable sized rounded corner boxes.