Home > Blockchain >  :hover only one line with text-decoration: underline;
:hover only one line with text-decoration: underline;

Time:12-09

Product name becomes underlined (product name in the layout is "Stand mixer ...", the rest shouldn’t be emphasized)

<div id="two">
    <div >68% off</div>
    <img  src="images/img2.png">
    <div></div>
    <div id="block_container_top">
        <div id="text_top"><span >Stand mixer with extra</span></div>
        <div > handle appreciation Gift </div>
        <div > Basket my Chu ...</div>
    </div>
    <div id="price_list_top">
        <div id="price_main_top">$49.99</div>
        <div id="price_before_top">$69.99</div>
        <div id="provider_top">Amazon</div>
    </div>
    <div id="bottom_top">
        <div id="new_top">NEW</div>
    </div>
    <div></div>
</div>

:hover should be when mouse poiting at this card:

CodePudding user response:

#two:hover .text_line {
  text-decoration: underline;
}
<div id="two">
    <div >68% off</div>
    <img  src="images/img2.png">
    <div></div>
    <div id="block_container_top">
        <div id="text_top"><span >Stand mixer with extra</span></div>
        <div > handle appreciation Gift </div>
        <div > Basket my Chu ...</div>
    </div>
    <div id="price_list_top">
        <div id="price_main_top">$49.99</div>
        <div id="price_before_top">$69.99</div>
        <div id="provider_top">Amazon</div>
    </div>
    <div id="bottom_top">
        <div id="new_top">NEW</div>
    </div>
    <div></div>
</div>

  • Related