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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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