• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

133
Views
Cambiar el texto de la tarjeta Bootstrap al pasar el mouse

Estoy trabajando en un sitio web donde tengo una lista de productos (que se muestran en las tarjetas de arranque) Quiero poder cambiar el texto de la tarjeta cuando el usuario pasa el cursor sobre él a un texto completamente diferente (Ocultar o reemplazar el texto original). ¿Alguien sabe de alguna solución elegante o algún puntero? Gracias.

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Puede hacer 2 divs que contengan el texto y el texto se desplace y alternar la propiedad de visualización dependiendo del desplazamiento de la tarjeta

 .card-hover-text{ display:none; } .card:hover .card-text{ display:none; } .card:hover .card-hover-text{ display:block; }
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_180284fd0bb%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_180284fd0bb%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-hover-text">New text</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error