Как использовать подстановочный знак в CSS и распознавать атрибут как собственный селектор - PullRequest
Новая
       28

Как использовать подстановочный знак в CSS и распознавать атрибут как собственный селектор

0 голосов
/ 13 июля 2020

В моем сценарии у меня есть таблица html с множеством ячеек, некоторые из них имеют такие классы, как hov1, hov2, ..., hov42, ..., до hov920.

Это небольшая таблица, в которой темно-зеленые ячейки (hov1) зависают, а светло-зеленые (hov2) не зависают (работает с Javascript, работает очень хорошо, если только таблица становится больше). enter image description here

...
 AA  00  BB  CC ...

Я знаю, что могу использовать подстановочные знаки css, чтобы добавить эффект наведения для всех классов, которые содержат hov. Но я хочу навести только мои классы, а не все классы hov. Можно ли отфильтровать дополнительные числа, чтобы только hov1 или hov42 получали эффект наведения в CSS. Насколько я знаю, есть только два решения:

CSS (плохой стиль?): 

hov1:hover, hov2:hover, hov3:hover ... hov99:hover {
  background: rgba(0, 200, 0, 0.5);
}

jQuery (очень тормозит, мой браузер разбился): 

$(this).addClass("hov" + x);
$(this).hover(function(e) {
  $(".hov" + x).css("background-color",e.type === "mouseenter"?"rgba(0, 200, 0, 0.5)":"rgba(0, 200, 0, 0.1)")
})

Есть ли другие варианты решения этой сложной проблемы.

Ответы [ 2 ]

1 голос
/ 13 июля 2020

Чтобы вызвать наведение курсора на все элементы с одним и тем же классом и при этом сохранить очень общий CSS без сотен классов (они все еще нужны в вашем HTML), вы можете просто использовать атрибут class элемента в настоящее время наведен элемент для нацеливания на все элементы с этим классом: 

$("[class^='linked']").on('mouseenter', function() {
    $( '.' + $(this).attr('class') ).addClass('hovered');
}).on('mouseleave', function() {
    $("[class^='linked']").removeClass('hovered');
});


$("[class^='linked']").on('mouseenter', function() {
    $( '.' + $(this).attr('class') ).addClass('hovered');
}).on('mouseleave', function() {
    $("[class^='linked']").removeClass('hovered');
});
th {
  background: lightblue;
}

th, td {
  padding: 5px 10px;  
}

[class^="linked"].hovered {
  background: rgba(0, 200, 0, 0.5);
}

[class^="linked"] {
  background: rgba(0, 200, 0, 0.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>00</th>
      <th>01</th>
      <th>02</th>
      <th>03</th>
      <th>04</th>
      <th>05</th>
      <th>06</th>
      <th>07</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="linked1">00</td>
      <td class="linked1">6D</td>
      <td class="linked2">64</td>
      <td class="linked1">74</td>
      <td class="linked1">4D</td>
      <td class="linked1">6F</td>
      <td class="linked2">20</td>
      <td>2B</td>
    </tr>
    <tr>
      <td class="linked1">2F</td>
      <td class="linked2">76</td>
      <td class="linked1">30</td>
      <td>73</td>
      <td>0D</td>
      <td class="linked1">0A</td>
      <td class="linked2">C2</td>
      <td class="linked3">00</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 13 июля 2020

Никто не мешает вам добавить столько классов к вашему элементу, сколько вы sh. Таким образом, вы можете фильтровать их по своему усмотрению.

Кроме того, если вы решите использовать подстановочные знаки, укажите как можно более c. 

div[class*="colored"] {
  background: yellow;
}

div[class*="colored"]:hover.should-flash {
  background: red;
}
<div class="colored1 should-flash">1</div>
<div class="colored2">2</div>
<div class="x">4</div>
<div class="colored3 should-flash">3</div>
...