Aquí tengo un textfield que le he dado a la función onmousehover como se muestra a continuación.

<h5 style="float:right;" id="showall" onmouseover="mouseOver()" onmouseout="mouseOut()">Show All</h5>

Aquí hay un div para el que tengo que aplicar el efecto de desplazamiento después de pasar el cursor por Mostrar todo div

<div id="abc">
  <input type="text">
</div>

Aquí está mi JavaScript

   function mouseOver() {
     document.getElementById("abc").style.color = "red";
   }

   function mouseOut() {
     document.getElementById("abc").style.color = "black";
   }

El código anterior no funciona. ¿Alguien puede decirme dónde estoy equivocado?

0
Kirataka 11 ene. 2017 a las 09:31

6 respuestas

La mejor respuesta

Puede asignar id="abc" a input o hacer algo como esto:

<div id="abc">
  <input style="color: inherit" type="text">
</div>

Codepen de trabajo

0
tanmay 11 ene. 2017 a las 06:37

Un método muy rápido para hacer esto es usar 'alternar'. Luego puede crear dos clases en su CSS con los colores que desee. En su línea de javascript, haga referencia al color que le gustaría alternar con la clase existente en su div.

/* here you use javascript to cycle between blue and gold. First you find the div by using document.getElementById('element')*/

function push() {
  document.getElementById("abc").classList.toggle('blue');
}
#abc {
  width: 200px;
  height:150px;
  padding: 20px;
  font-family: arial;
  color: black;
}

/*Your first colour to toggle*/
.gold {
  background: gold;
}
/*Your second colour to toggle*/
.blue {
  background: dodgerblue;
}
<!-- Notice that a class of 'gold' has been added to give the div a color. This will be toggled with your desired colour.  -->

<div id="abc" class="gold" onmouseover="push()">
Hover over here to toggle classes.
</div>
0
theAussieGuy 2 mar. 2018 a las 05:46

En general, la propiedad Color de los elementos varía según el navegador. Por lo tanto, establecer la propiedad de color en el elemento primario no tendría el mismo efecto en todos los navegadores, a menos que se especifique explícitamente.

Esto es lo que puedes hacer.

function mouseOver() {
  document.getElementById("abc").style.color = "red";
}

function mouseOut() {
  document.getElementById("abc").style.color = "black";
}
#abc * {
  color: currentcolor;
}
<h5 id="showall" onmouseover="mouseOver()" onmouseout="mouseOut()">Show All</h5>

<div id="abc">
  <input type="text" value="Sample Text">
</div>
0
Sreekanth 11 ene. 2017 a las 06:46
        
   <h5 style="float:right;" id="showall" onmouseover="mouseOver()" onmouseout="mouseOut()">Show All</h5>
  <div id="abc">
   To they four in love. Settling you has separate supplied bed.    Concluded resembled suspected his resources curiosity joy. Led all cottage met enabled attempt through talking delight. Dare he feet my tell busy. Considered imprudence of he friendship boisterous. 
  </div>
    <script>
         function mouseOver() {
         document.getElementById("abc").style.color = "red";
         }
    
        function mouseOut() {
         document.getElementById("abc").style.color = "black";
        }
    </script>

Aquí hay un fragmento de trabajo. esto podría ayudarte

0
Himesh Suthar 11 ene. 2017 a las 06:55

Si bien esto no responde directamente a su pregunta sobre JavaScript, quiero señalar que una hoja de estilo en cascada (CSS) es un mejor enfoque para resolver este problema porque JavaScript siempre se puede desactivar en el navegador. En ese caso, las funciones de mouseover dejarán de funcionar, mientras que una hoja de estilo persistirá.

#abc input {
  background-color: red;  
  color: black;
}

#abc input:hover {
  background-color: blue;  
  color: white;
}
<div id="abc">
  <input type="text" value="mouseover me">
</div>

Si logra el mismo resultado, priorice CSS sobre JavaScript.

1
ThisClark 11 ene. 2017 a las 15:05

Estás aplicando un cambio de color en div. Debe aplicarlo en el cuadro de entrada.

<div id="abc">
  <input id="xyz" type="text">
</div>


   function mouseOver() {
     document.getElementById("xyz").style.color = "red";
     console.log("In");
   }

   function mouseOut() {
     document.getElementById("xyz").style.color = "black";
     console.log("Out");
   }
0
Rishabh 11 ene. 2017 a las 06:38