html - 多个标签应该应用父级的一个 [hover]CSS

Question

       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}

我想在用户悬停 li 时将文本颜色更改为黑色 [both p] 即当用户将鼠标移动到列表中的任何位置时，两个 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

当用户将鼠标移到 LI 标签上时，两个 P 标签的颜色都应为黑色 尝试了更多的东西，但找不到哪里出了问题？？？

Answer 1

添加这个:

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

FIDDLE