наведите курсор на td и добавьте класс в span

#javascript #jquery #html #css #row

#javascript #jquery #HTML #css #строка

Вопрос:

Вопрос: Я хочу навести курсор мыши на строку и снова в этой конкретной строке, если я наведу курсор мыши на icons ( pencil , trash ) , тогда соответствующие значки должны иметь округленные границы, как показано на первом снимке..

Не могли бы вы помочь мне, как я могу этого добиться? Я хочу, чтобы все управлялось с помощью действий JS / jquery. Ценю вашу помощь

Объяснение: до сих пор то, что я сделал, и мой код..

1) Ниже приведен мой td элемент, теперь при наведении курсора мыши класс css icon-hover (вставленный ниже код) должен быть добавлен к span классу ниже

 <td class='j-td-edit font-color-meta'><span class="glyphicon glyphicon-pencil"></span></td>

Ниже приведен фрагмент CSS, отвечающий за получение закругленной границы

 /*icon hover style*/
.icon-hover {
    border: 1px solid #bfbfbf;
    padding: 0.4vw;
    border-radius: 0.3vw;
}

2) Когда я наводлю курсор мыши на строку, строка выделяется с помощью приведенного ниже кода и прилагаемого скриншота..

 /*row hover*/
.hover-color{
    background-color: #D0CFCF;
}

=> соответствующее действие JS для "mouseenter, mouseleave" и изображение приведены ниже

 $(document).on('mouseenter', '.row', function () {
    var $this = $(this), row = $this.closest("tr");
    row.addClass("hover-color");
});

$(document).on('mouseleave', '.row', function () {
    var $this = $(this), row = $this.closest("tr");
    row.removeClass("hover-color");
});

1. Кажется, вы знаете, как заставить вещи происходить при наведении курсора на всю строку, так почему бы вам не попробовать сделать то же самое с иконками?

2. после того, как я наведу курсор на строку, мне нужно снова проверить, есть ли другой уровень наведения на значки. эта часть — то, что я нахожу сложным..

3. @Jeto, я не могу поверить, что я это сделал… Я 30 минут бился головой, чтобы исправить это .. и ваша небольшая идея просветила меня..

4. Ха-ха, нет проблем, рад, что вы решили это!

Ответ №1:

Использование :hover псевдокласса CSS

 .row {
  height: 35px;
  background: #f5f5f5;
}
.row:hover {
  background: #dddddd;
}

.row .glyphicon {
  padding: 5px;
}
.row .glyphicon:hover {
  outline: 1px solid #000000;
}

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<table width="100%">
  <tr class="row">
    <td>Test</td>
    <td class='j-td-edit font-color-meta'><span class="glyphicon glyphicon-pencil"></span></td>
  </tr>
  <tr class="row">
    <td>Test</td>
    <td class='j-td-edit font-color-meta'><span class="glyphicon glyphicon-pencil"></span></td>
  </tr>
  <tr class="row">
    <td>Test</td>
    <td class='j-td-edit font-color-meta'><span class="glyphicon glyphicon-pencil"></span></td>
  </tr>
</table>

Ответ №2:

После слов @jeto… Я нашел решение своего кода..

 //below snippet find the nth(which is 4th td in my case and appends the class below.
 $(this).find('td').eq(4).find('span').addClass('icon-hover'));

 $(this).find('td').eq(4).find('span').removeClass('icon-hover'));