Несколько тегов должны применять один [hover] CSS родительского

       HTML CODE

        <ul id="info">
            <li>
                <h3><span>Text1</span>Text2
                    <img src="path" alt="" />
                </h3>
                <p> DATA1 </p>
                <p class="descrip"> DATA2 </p>
            </li>
        </ul>

      CSS CODE

       ul#info {width:100%;float:left}
       ul#info li {width:226px;margin-left:56px;float:left}
       ul#info li:first-child {margin:0}
       ul#info li h3 {width:100%;height:67px;float:left;font-size:26px;color:#31a1ff;font-weight:bold;line-height:60px;letter-spacing:-1.7px}

       ul#info li h3 span {color:#3b3b3b;margin-right:2px}
       ul#info li h3 img {margin-right:31px;float:right}
       ul#info li p {width:100%;margin-top:25px;float:left;font-size:18px;color:#848484;line-height:24px;letter-spacing:-0.8px}

       ul#info li p.all{}
       ul#info li p.all:hover{color:#000000;}

       ul#info li p.descrip {margin-top:13px;font-size:14px;line-height:18px;text-align:justify}

Я хочу изменить цвет текста на черный [оба p], когда пользователь наведет li, т.е. когда пользователь перемещает мышь в любом месте списка, то цвет тега p должен измениться на черный

Я пробовал следующие

  1) ul#info li:hover {color:black!important;}

  2) ul#info li p:hover {color:black!important;}
        In this case the text color changes to black but the problem is only one P tag color changes to black. I want both p tag color to change

  3) Tried using DIV tag inside li tag
       <ul id="info">
        <li>
          <div id="black"
            <h3><span>Text1</span>Text2
                <img src="path" alt="" />
            </h3>
            <p> DATA1 </p>
            <p class="descrip"> DATA2 </p>
          </div>
        </li>
      </ul>

    and #black:hover{color:black!important;}
    but doesn't work

Когда USER перемещает мышь на тег LI, цвет тега P должен быть черным, попробовал еще много вещей, но не может найти, что происходит неправильно???