Как реализовать несколько кнопок изображения на одной выделенной строке

Question

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

Единственный способ, которым я знаю, это сделать с помощью тега привязки, но как только я его использую, я не могу вложить в него другой якорь. Есть ли способ создания «вложенных кнопок» или обходного пути (желательно не включая JavaScript) для достижения моей цели?

maralbjo

Answer 1

Ваш файл CSS может содержать:

li:hover {
   background-color: #3f3; /* whatever color you want */
   list-style: none;
}

Ваш HTML-файл может содержать список элементов:

<ul>
 <li><a href="alink.html"><img src="image.png" alt="mybutton"></a></li>
 <li>Line</li>
 <li>Goes</li>
 <li>Here</li>
</ul>

Answer 2

Вы не можете заставить его работать в старых браузерах IE без сценариев. (

В итоге я сделал то, что предложил Дмитрий Фарков в своем комментарии: добавление поведения при наведении курсором. Есть интересная альтернатива, которую я использовал некоторое время, хотя: что угодно: hover .

Может быть, он подойдет вам лучше.