Cómo mostrar el icono de acción de edición cuando se pasa el mouse sobre un text en particular

Cómo mostrar / ocultar el ícono de edición al pasar el mouse sobre un text en particular.

Aquí está mi fragment de código html

<ul> <li> <a id="pop" href="javascript:;;" data-content="test Desc" data-id="123"> <span class="testNameInfo">Test</span> </a> <div class="pull-right icons-align"> <a href="javascript:;;" class="editInline"><i class="fa fa-pencil"></i>..</a> <a href="javascript:;;"><i class="fa fa-plus"></i></a> <a href="javascript:;;"><i class="fa fa-times"></i></a> </div> </li> </ul> 

cuando la página se carga, el icono de fa-pencil está en estado oculto. Cuando coloco el mouse sobre el text, debe mostrar el icono de fa-pencil. Los íconos restantes (agregar y eliminar) siempre están en estado de mostrar.

Aquí está mi javascript para ocultar el icono de fa-pencil

 $("a.editInline").css("display","none"); 

Estoy usando frameworks de backbone y marionette js, así que necesito registrar los events a la vista.

Por favor, hágame saber cuál es la mejor manera de salir de mi problema.

3 Solutions collect form web for “Cómo mostrar el icono de acción de edición cuando se pasa el mouse sobre un text en particular”

Puedes hacer lo siguiente:

 $('.testNameInfo').on('mouseover mouseout',function(){ $(this).closest('li').find('.editInline').toggle(); //find the closest li and find its children with class editInLine and //toggle its display using 'toggle()' }); 

ACTUALIZAR

MANIFESTACIÓN

@JamieBarker hizo su punto, que es válido aquí, así que sugeriría probar el siguiente código en su lugar

 $("a.editInline").css("display","none"); $('li').on('mouseover mouseout',function(){ $(this).find('.editInline').toggle(); //find its children with class .editInLine and //toggle its display using 'toggle()' }); 

Es mejor usar CSS que JavaScript si puedes:

 a.editInline { display:none; } li:hover a.editInline { display:inline-block; } 

ACTUALIZAR

Rendimiento / Simplicidad, le aconsejo que vaya con la solución CSS proporcionada. Si todo lo demás puede usar, entonces la solución JS.

Solución CSS opcional

 .editInline { display: none; } #pop:hover .icons-align .editInline { display: inline-block; } 

Solución JS

 $(function() { $(".editInline").hide(); // Use this if CSS is not wanted $("#pop").hover(function() { $(".editInline").show(); }, function() { $(".editInline").hide(); }); }); 
  • Prueba de unidad con Marionette.CompositeView
  • ¿Ejecutar tarea cuando se presiona tab o enter en un text de input de formulario con Backbone / Marionette?
  • Untaught SyntaxError: token inesperado <en la línea 1 de http: // localhost: 25194 /
  • ¿Cómo get la propiedad del model en className of ItemView?
  • Renderizar una estructura recursiva usando CompositeView mientras encapsula cada Modelo en un ItemView con Marionette
  • El elemento no está listo después de Backbone.Marionette.ItemView render?
  • Marioneta: inicia el evento sin disparar
  • Marionetas regiones anidadas profundas con routing
  • Encuadernación a artículoVer el cambio Eventos
  • Dependencias circulares para una aplicación web con backbone.marionette y requireJs
  • Estrategia de cambio de Marionette Layout
  • Backbone Marionette y RequireJS Módulos
  • Backbone Marionette Views estructura
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.