Какие инструменты автоматически встроить стиль CSS для создания почтового HTML-кода? [закрытый]

Pure CSS

Используйте :hover , чтобы изменить отображение .records для блокировки при наведении курсора на строки просмотра.

.records {
  display: none;
}

.view:hover .records {
  display: block;
}

  
Add Rows
  
DeleteRows
  
View Rows
    

      
View New Records
      
View Old Records
    
  

Чистый Javascript

И, как всегда, есть несколько способов сделать этот. Вы можете использовать чистый JavaScript, как показано ниже. Это использует .querySelectorAll() для выбора элементов, .addEventListener() , чтобы сделать что-то на mouseover и mouseleave . Очевидно, что это намного сложнее и сложнее, чем в предыдущем методе, но это оставляет место для гораздо большей настройки.

var records = document.querySelectorAll(".records");
var view = document.querySelectorAll(".view")[0];

view.addEventListener("mouseover", function() {
  records.forEach(e => {
    e.style.display = "block";
  });
});

view.addEventListener("mouseleave", function() {
  records.forEach(e => {
    e.style.display = "none";
  });
});

.records {
  display: none;
}

  
Add Rows
  
DeleteRows
  
View Rows
    

      
View New Records
      
View Old Records
    
  

jQuery

И, конечно же, есть jQuery метод. Это использует .hover() , чтобы определить, когда вы наводите курсор на текст, а затем вы используете .show() , чтобы показать li. Затем вы используете .mouseout() , чтобы определить, когда выходите из текста, и , .hide(), , чтобы скрыть текст.

$(".records").hide();

$(".view").hover(function() {
  $(".records").show();
});

$(".view").mouseout(function() {
  $(".records").hide();
});

  
Add Rows
  
DeleteRows
  
View Rows
    

      
View New Records
      
View Old Records