Mira, te muestro en este ejemplo lo que pasa.
$('.estilo').hover(function(){
$('.estilo').each(function(){
$(this).val(" * ");
});
});
$('.estilo').mouseout(function(){
$('.estilo').each(function(){
let val = $(this).data('number');
$(this).val( val );
});
});
document.title = "ejemplo teclado";
<!----- variable para imprimir numeros
var answer_mode = 0;
<!----- función para limpiar la pantalla
function clear1() {
document.forms["teclado"].display.value = "";
}
function clear() {
clear1();
}
function number(ch) {
if (answer_mode) {
clear1();
answer_mode = 0;
}
document.forms["teclado"].display.value += ch;
var hoja=ch
}
function randomNumbers(){
var values = [1,2,3,4,5,6,7,8,9,0];
var random = Math.floor(Math.random() * 10);
//Barajea los valores
for(var i=-1; i<random; i++){
var item = values.shift();
values.push(item);
}
for(var i=1; i<=values.length; i++){
var currentNumber = values[i-1];
var inputObject = document.getElementById('input_'+i);
inputObject.value = currentNumber;
inputObject.setAttribute("data-number",currentNumber);
}
}
//random numbers in each refresh
randomNumbers();
.estilo {
width:50px;
height:50px;
font-size:30px;
color:blue
}
.c {
width:50px;
height:50px;
font-size:30px;
color:blue
}
button {
background: black;
color: white;
margin: 3px;
padding: 6px;
border-radius: 2px;
cursor: pointer;
border: none;
outline: none;
}
<form name="teclado">
<input readonly="readonly" type="text" name="display" value="" size="8" style="text: Arial; font-size: 20pt; background-color:#58D3F7" >
<table>
<tbody>
<tr></tr><tr></tr><tr></tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td> <input value=" 7 " data-number="7" onclick="number(7)" type="button" id="input_7" class="estilo"></td>
<td> <input value=" 8 " data-number="8" onclick="number(8)" type="button" id="input_8" class="estilo"</td>
<td> <input value=" 9 " data-number="9" onclick="number(9)" type="button" id="input_9" class="estilo"></td>
</tr>
<tr>
<td> <input value=" 4 " data-number="4" onclick="number(4)" type="button" id="input_4" class="estilo"></td>
<td> <input value=" 5 " data-number="5" onclick="number(5)" type="button" id="input_5" class="estilo"></td>
<td> <input value=" 6 " data-number="6" onclick="number(6)" type="button" id="input_6" class="estilo"></td>
</tr>
<tr>
<td> <input value=" 1 " data-number="1" onclick="number(1)" type="button" id="input_1" class="estilo"></td>
<td> <input value=" 2 " data-number="2" onclick="number(2)" type="button" id="input_2" class="estilo"></td>
<td> <input value=" 3 " data-number="3" onclick="number(3)" type="button" id="input_3" class="estilo"></td>
</tr>
<td><input value=" 0 " data-number="0" onclick="number(0)" type="button" id="input_10" class="estilo"></td>
<td></td>
<td> <input value="C" onclick="clear1()" type="button" class="c"></td>
<td></td>
<button class="btn" type="ver">Mostrar URL</button>
Al enviarlo solo visualmente me cambia los textos, pero permanecen igual. Quisiera hacerlo tanto con este tipo de ejemplo porque son varias temáticas y una de ellas es con imágenes también.
Disculpa tanta pregunta.