Translation of text



  • How can the text be furthest through hover without jquery?

    <div class='first_block'>
        <div class='second_block'>Текст</div>
    </div>
    
    .first_block {
        display: inline-block;
        width: 300px;
        height: 200px;
        border: 1px red solid;
        padding: 10px;
    }
    

    .second_block { display: none; }
    .first_block:hover .second_block { display: block; }



  • It's possible through transparency.opacityas the style is numerical between 0 and 1, the current has an intermediate number with a floating point, such as 0.5, which means a smooth transition can be applied to it (transition)

    A display has no intermediate values, so transition Not applicable

    .first_block {
        display: inline-block;
        width: 300px;
        height: 100px;
        border: 1px red solid;
        padding: 10px;
    }
    

    .second_block { opacity: 0; transition: .2s; }
    .first_block:hover .second_block { opacity: 1; transition: .2s; }

    <div class='first_block'>
    <div class='second_block'>Текст</div>
    </div>


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2