0

Quiero que al pasar el ratón por encima del botón "Reservar" cambie el texto del botón a "Loguéate".

<input type='submit' name='reservar' id='reservar' value='Reservar'/>



$(document).ready(function(){
    $('.reservar').hover(function(){
        $(this).text("Reservar");
    }, function() {
        $(this).text("Logueate");
    });
});
2
  • en el código de jquery cambia '.reservar' por '#reservar'
    – Rene Limon
    el 8 ene. 2018 a las 20:53
  • Tampoco me funciona.
    – omaza1990
    el 8 ene. 2018 a las 21:05

2 respuestas 2

2

Aquí te dejo la solución, el problema es el selector, debe ser #reservar. Además, para cambiar el texto de un input debe ser en su atributo value, por lo tanto, con la función text() no funciona:

    $('#reservar').hover(function(){
        $(this).val("Logueate");
    }, function() {
        $(this).val("Reservar");
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='submit' name='reservar' id='reservar' value='Reservar'/>

1

Puedes utilizar eventos hover para realizar el cambio de texto como en el siguiente ejemplo .

div#line1 span#a {
  display: inline;
}

div#line1:hover span#a {
  display: none;
}

div#line1 span#b {
  display: none;
}

div#line1:hover span#b {
  display: inline;
}
<div id="line1">
  <table border="1">
    <tr>
      <td>
        <span id="a">this is sick</span><span id="b">this is awesome</span>
      </td>
    </tr>
  </table>
</div>

o con jQuery realizalo de la siguiente forma.

.html

<a class="btn" href="#">
     <img src="#" alt=""/>
    <span>Replace me</span> please
</a>

.css

$('.btn').hover(function(){
    $(this).text("I'm replaced!");
}, function() {
    $(this).text("Replace me please");
});
4
  • Tu código es muy completo y válido, ¿pero con jQuery, lo que estuve intentando...?
    – omaza1990
    el 8 ene. 2018 a las 20:31
  • 1
    checa el codigo de este ejemplo o el codigo jquery que te puse abajo del primer ejemplo. jsfiddle.net/3JDZs el 8 ene. 2018 a las 20:34
  • He intentado tu código pero no me funciona. Lo he adaptado a lo siguiente. Mira la pregunta editada, ¿dónde tengo el error?
    – omaza1990
    el 8 ene. 2018 a las 20:37
  • ¿A qué se debe mi error?
    – omaza1990
    el 8 ene. 2018 a las 21:55

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.