javascript - 2 mouseover/hover effects in 1 div? -

I apologize in advance for poor English.

An item (price) should be shown in the picture, and the other (the descendants) I am unable to get out of it, there is only one.

I know my code is wrong, but do not know how to cut it.

  & lt; Div class = "grid_1" & gt; & Lt; Div class = "see projects-before" & gt; & Lt; Div class = "tiptext" & gt; & Lt; A href = "" & gt; & Lt; Img src = "http://foto.scigacz.pl/cache/imgs/_w750/gallery/aktualnosci/imprezy/3ci_rajd_chlorowy/img_06.jpg" alt = "width =" 235 "height =" 133 "/> gt ; & Lt; / A & gt; & Lt; Div class = "description" & gt; There is a big bold description box & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "mask" & gt; & Lt; Div class = "info" & gt; & Lt; Span style = "left: 100px; condition: complete;" & Gt; Price: $ 200 & lt; / Span & gt; & Lt; Div class = "button_add" & gt; & Lt; A href = "" & gt; & Lt; Img src = "" alt = "" style = "float: right; correct: 20px;" /> & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; $ (Document). $ ('' Description '') Hide (); $ ('tiptext')   
  .hower (function () (if (! $ (This). Child ('description'). (": Animated") {$ (this). Child ('description') .FadeIn ();}}, Function () {$ (this). Children ('Description'). FadeOut ();});});   
  .grid_1 {width: 235px;} Description {Display: None: Position: Full; Width: 173px; Height: 133px; Background Color: # 000; Margin: -138 Pix 0 235px; Color: #fff ;} .mask .info {font-size: 18px; replace text: uppercase; color: #fff; Margin: 4px 0 0;} .mask.info IMG {display: inline; vertical-align: middle; text-align: center; margin top: -5px; padding: 10px;}. Project {width: 235px; hidden flame; height: 133px; cursor: default;} .projects .mask {width: 235px; height: 33px; hidden flux; bottom: 0;} .view-first .mask {opacity: 0; background color : RGBA (43, 45, 46, 0.9); Infection: all 0.4s easily;}. View-first: Hover Mask {Opacity: 1; } .Mask .info {font-size: 18px; Change text: uppercase; Color: #fff; Margin: 4px 0 0; }   
 Maybe someone can help me?   
 
 
 Here's your solution  
 Your HTML should look like this first  
  & lt; Div class = "grid_1" & gt; & Lt; Div class = "see projects-before" & gt; & Lt; Div class = "tiptext" & gt; & Lt; A href = "" & gt; & Lt; Img src = "http://foto.scigacz.pl/cache/imgs/_w750/gallery/aktualnosci/imprezy/3ci_rajd_chlorowy/img_06.jpg" alt = "width =" 235 "height =" 133 "/> gt ; & Lt; / A & gt; & Lt; Div class = "description" & gt; There is a big bold description box & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "mask" & gt; & Lt; Div class = "info" & gt; & Lt; Span style = "left: 100px; condition: complete;" & Gt; Price: $ 200 & lt; / Span & gt; & Lt; Div class = "button_add" & gt; & Lt; A href = "" & gt; & Lt; Img src = "" alt = "" style = "float: right; correct: 20px;" /> & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 And you should look at CSS like this  
  .grid_1 {width: 235px; }. Description {Display: Block; Status: Completed; Width: 173px; Height: 133px; Background color: # 000; Left: 235px; Top: 0; Color: #fff; } .Mask .info {font-size: 18px; Change text: uppercase; Color: #fff; Margin: 4px 0 0; } .Mask. Info img {display: inline; Vertical-align: medium; Text-align: center; Margin top: -5px; Padding: 10px; }. Project {width: 235px; Height: 133px; Cursor: default; Status: Relative; } .projects .mask {width: 235px; Height: 33px; Hidden flurry; Bottom: 0; Status: Completed; } .view-first .mask {opacity: 0; Background color: RGBA (43, 45, 46, 0.9); Transition: All 0.4 s easily; }. View-first: Hover Mask {Opacity: 1; } .Mask .info {font-size: 18px; Change text: uppercase; Color: #fff; Margin: 4px 0 0; }   
 Please see the updated