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(); }); }); 
  • Comprender los commands y events de Backbone / Marionette
  • Crear un layout que acepte un número variable de vistas (y por lo tanto regiones)
  • Marionette.CompositeView, cómo pasar parameters a Marionette.ItemView
  • Cómo agregar una opción de eliminación personalizada para las filas de la cuadrícula
  • Seguridad de objects en Parse con la API de JavaScript: vincular usuarios a los objects guardados
  • Renderizar una región de Marionetas después de que se ha obtenido el model
  • Backbone Marionette y RequireJS Modules Confusion: el module parece no estar definido
  • Comprender los layouts en Marionette for Backbone.js
  • Marionette - Relaciones entre la aplicación y el module
  • Marionetas regiones anidadas profundas con routing
  • Enigma del layout de Backbone.js "enrutador gordo"
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.