ссылка вокруг div в Google Chrome

Question

У меня есть родительский div и несколько других div, содержащих текст. я хочу изменить цвет фона моего родительского div при наведении курсора и перенаправить на другую страницу при нажатии

так я и сделал

<a href="">
  <div class="parentDiv">
    <div>hello</div>
    <div>user</div>
  </div>
</a>

.parentDiv:hover{background-color:#72c1bf;cursor:pointer;text-decoration:none;}

и на самом деле это работает в IE8 и firefox, но в chrome я выделил все отдельные тексты внутри двух дочерних элементов div. Почему?

Answer 1

Поскольку текстовые декорации находятся на теге <a>, вам также необходимо установить text-decoration: none; для тегов <a>.

Но, согласно стандарту html, тег <a>, которыйявляется встроенным элементом, не должен содержать никаких блочных элементов, таких как <div>, см. html спецификации

Answer 2

Если один тег

<a>

является проблемой (как это было для меня).Используйте это:

<a href='#' style='text-decoration:none;' >

Answer 3

Попробуйте это возможно:

<a href="" class="link">
  <div class="parentDiv">
    <div>hello</div>
    <div>user</div>
  </div>
</a>

И CSS:

a.link{display:block; text-decoration:none}
.parentDiv:hover{background-color:#72c1bf;cursor:pointer;text-decoration:none;}

Answer 4

Попробуйте a:hover{text-decoration:none} протестировать его в ie9, и chrome с вашим исходным кодом не будет работать с атрибутом! Важный.

Answer 5

Добавление text-decoration: none к тегу a убрало его, но я не уверен, что Chrome верный или неправильный, здесь.Использование тега a в качестве элемента блока, как это работает, но я не уверен, насколько это законно до HTML 5. Кроме того, мне пришлось добавить color: black, в противном случае текст также был синим или фиолетовым (посетил илицвет непосещенной ссылки).