На основе обсуждения здесь мы знаем, что это разрешено помещать <div> в тег <a>, учитывая, что мы используем html5, но мне было интересно, как мы можем изменить стили в этом <div>. Короче говоря, у меня скелет html-кода такой:

<a href='somelink.html'>
    <div style='width:100px; height:100px'>
         text text text
    </div>
</a>

Мотивация состоит в том, что я надеюсь достичь эффекта, когда при наведении курсора мыши на div (а не только на текст) изменяется и фон, и цвет текста в div. Обратите внимание, что где-то в файле css сторонний шаблон уже определяет a:hover (a:focus), и я хочу переопределить поведение наведения только в этом конкретном div. Может кто-нибудь подсказать, как мне этого добиться?

Чтобы дать вам конкретный пример, я играл на w3cschool.com , а полные коды приведены ниже. Я помещаю комментарии с указанием, где заполнять коды.

Обратите внимание, что цвет фона квадрата div светло-серый, а цвет текста внутри зеленый с подчеркиванием, а цвет текста меняется на красный при наведении курсора мыши на текст.

< Сильный > Task

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

Код

<!DOCTYPE html>
  <html>
    <head>
      <style>
        /* Assume following 4 rules are provided somewhere in the existing css */
        a:link {
          color: green;
        }

        a:visited {
          color: green;
        }

        a:hover {
          color: red;
        }

        a:active {
          color: yellow;
        } 

        /* ==== CHANGE HERE ======== */
        .fill_a {
          // what is the answer?
        }

        .fill_div {
          // what is the answer?
        }
        /* ==== CHANGE HERE END ==== */

      </style>
    </head>
    <body>

    <p>Mouse over and click the link: <a href="http://www.w3schools.com">w3schools.com</a></p>

    <a href='#' class='fill_a'>
      <div style='width:100px; height:100px; background-color:#ddd' class='fill_div'>
        123
      </div>
    </a>
  </body>
</html>

Заранее благодарим за ответ.

Редактировать 1. Больше фона

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

<div class="panel panel-default">
  <div class="panel-heading">This to be an anchor</div>
  <div class="panel-body">Panel Content</div>
</div>
1
TimeString 25 Фев 2016 в 10:12

2 ответа

Лучший ответ

На основе вашего HTML

Из вашей задачи

CSS

.fill_a:hover{
  color:white;
  text-decoration:none;
}

.fill_div:hover{
  background-color:pink !important;
}

Вам следует использовать !important, потому что в вашем HTML вы уже установили стиль. Это означает, что стиль, помещенный в html, является приоритетным.

Подробнее о стилизации css https://css-tricks.com / when-using-important-is the-right-choice /

ДЕМО

3
Fiido93 25 Фев 2016 в 09:24

Попробуйте этот css:

a.fill_a {
  text-decoration: none;
}
a.fill_a:hover > div.fill_div {
  background-color: pink !important;
  color: #fff;
}

Демонстрация скрипки здесь

1
Darren Sweeney 25 Фев 2016 в 07:35