Have the main div-block with “Background: #FFF” (Div1).
Inside this block there are two other Div blocks:
Div11 – picture with filter “GRAYSCALE: 100%” (black and white) and
Div12 – text with the “Display: None” style (text is hidden).

Total we have such a structure:

& lt; div class = "div1" & gt; Block with Background: #FFF
    & lt; div class = "div11" & gt; 100% & LT; / div & gt picture with GRAYSCALE filter;
    & lt; div class = "div12" & gt; Text with the style of Display: None & LT; / Div & GT;
& lt; / div & gt;

It is necessary to make it so that when you hover the mouse on the main div1-block, 3 processes occurred:

1. changed the color of the background in the Div1 block.
2. In the Div11 block, the GRAYScale filter was 0%.
3. In the Div12 style, the Display: block.

i.e. It should work like this:

& lt; div class = "div1" & gt; Background: # F00
      & lt; div class = "div11" & gt; Picture with GRAYScale 0% & LT; / div & gt filter;
      & lt; div class = "div12" & gt; Text with Display: Block & Lt; / Div & GT;
  & lt; / div & gt;

How to do it?
How to make hover single block specify style for other blocks?

Thanks in advance.

Answer 1, Authority 100%

Suddenly, I painted me:

div1: hover {
Background: # F00;
}
Div1: Hover Div11 {
-WebKit-Filter: GRAYScale (0%);
-MOZ-Filter: GRAYScale (0%);
-MS-filter: grayscale (0%);
-O-Filter: GRAYScale (0%);
Filter: None;
}
Div1: Hover Div12 {
Display: Block;
}

Answer 2, Authority 100%

http://jsfiddle.net/j7z1s31g/

html

& lt; div class = "div1" & gt;
  & lt; div class = "div11" & gt; & lt; img src = "https://lh3.googleusercontent.com/-kfmqj_gnfqi/txhbpiguhni/aaaaaaaabu/lfkf147j_pc/s150-c/photo.jpg" alt = "" / & gt; & lt; / div & gt;
   & lt; div class = "div12" & gt; Text with the style of Display: None & lt; / div & gt;
& lt; / div & gt;

css

div {}
.div1 {
  Background: #FFF;
  Border: 1px Solid # 000;
}
.div11 img {
  -WebKit-Filter: GRAYScale (100%);
}
.div12 {
  Display: None;
}
.div1: hover {
  Background: #CCC;
}
.div1: hover img {
  -WebKit-Filter: GRAYSCALE (0);
}
.div1: hover .div12 {
  Display: Block;
  / * Color: #FFF; * /
  Font-Size: 16px;
}