Untitled Document

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

Exploring the Element in Practice

Let’s try a hands-on exercise to study how the element works. Erase everything in your styles.css file (if you added content from previous tutorials). Next, add the following CSS rule for the tag selector:

div  background-color: green; height: 100px; width: 100px; > 

Save the styles.css file. Next, return to your index.html file, erase everything that’s there (except for the first line of code: ) and add the following code snippet:

Notice that the element has opening and closing tags but does not require any content. Save the index.html file and reload it in your browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser).

Your webpage should display a green box 100 pixels wide and 100 pixels tall as specified by the CSS rule:

Note that you have added the class as an attribute to the tag by adding the class attribute and class name to each opening tag. Save the file and reload it in your browser. You should receive something like this:

Adding and Styling Text in a Container

You can put text inside a container by inserting text in between the opening and closing tags. Try adding text inside each of the elements in your index.html file:

div class="div-1">Bluediv> div class="div-2">Reddiv> div class="div-3">Yellowdiv> 

Save the file and reload it in your browser. You should now have text displayed in each of your containers:

You can add additional HTML elements to your text inside the elements. For example, try adding the HTML heading tags ( to ) to your text inside the tags in your index.html file:

div class="div-1">h2>Blueh2>div> div class="div-2">h3>Redh3>div> div class="div-3">h4>Yellowh4>div> 

Save the file and reload it in your browser. The text inside the containers should now be styled according to the default properties of the to tags:

Note that the elements have also adjusted their positions slightly. This repositioning is caused by the default margin properties of the through elements. You’ll learn more about margins in the next tutorial on the CSS Box Model, but for now it is fine to ignore them

To style text inside the containers, you can specify text property values in the rulesets for your classes. Try adding the properties and values to your rulesets in your styles.css file as highlighted in the in the following code snippet:

.div-1  background-color: blue; height: 50px; width: 50px; font-size: 10px; color: white; iu > .div-2  background-color: red; height: 100px; width: 100px; font-size: 20px; color: yellow; > .div-3  background-color: yellow; height: 200px; width: 200px; font-size:30px; color: blue; > 

Save your styles.css file and reload the index.html file in your browser. The text inside the containers should now be styled according to the CSS rules in your styles.css file:

How to change div color? [closed]

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

      .Div1 .Div2 
asdlsakd
 
asdsa
   

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/

If I am not wrong from your question, you have two overlapping divs, div1 and div2 and you want to hover on them to get a yellow color? Is that what you mean?

I want to change color of div1 to yellow when i mouse over the div2 how can I. You want on both div or only one div — @AnupKaranjkar ?

7 Answers 7

Try to use jQuery .show(); and .hide(); function.

This is div1
 
This is div2
 

$("#div1").hover(function() < $("#div2").show(); >, function() < $("#div2").hide(); >); 

Don’t forget to link to jquery.min.js .

Have a look at this fiddle

Put a container around your divs like this:

 
This is div1
 
This is div2
 
 

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

If you want to see it in practise have a look at this demo

You are cracking a nut with a sledgehammer here. What OP’s asking can be achieved without any JS at all, set aside using libraries like jQuery.

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:

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); >); 

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.

Источник