Как мне переопределить стиль наведения div в теге привязки?

на основе the discussion здесь мы знаем, что можно положить <div> в тег <a>, учитывая, что мы используем html5, но мне было интересно, как мы можем изменить стили в этом <div>. Короче говоря, у меня есть HTML код скелет так:Как мне переопределить стиль наведения div в теге привязки?

<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 светло-серый, а цвет текста внутри - зеленый с подчеркиванием, а цвет текста меняется на красный, когда мышь нависает над текст.

Задача

Я надеюсь, что эффективная площадь всей 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>

Спасибо за ваш ответ заранее.

Edit 1: Больше фоне

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

<div class="panel panel-default"> 
    <div class="panel-heading">This to be an anchor</div> 
    <div class="panel-body">Panel Content</div> 
</div>

источник

2016-02-25 TimeString

Почему вам нужен 'div' внутри якоря? Вы можете удалить 'div' и использовать только заблокированный' ' –

Не ** ** [это] (https://jsfiddle.net/1gxwr6gq/) ** проще? –

@jose правильный. И если вы хотите, чтобы текст был вертикально вертикальным, а вместо высоты, вы можете дать отступы сверху и снизу в соответствии с тегом привязки. – Ashish

Основываясь на вашем 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/

DEMO

источник

2016-02-25 07:25:49 Fiido93

очень приятно. Мне пришлось переопределить bootstrap css – Shashi3456643

Попробуйте CSS:

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

Fiddle demo here

источник

2016-02-25 07:23:22

Мне было интересно, есть ли способ не использовать '! Important'? На самом деле я даже не уверен, почему мы должны использовать '! Important', я просто знаю, если мы это сделаем, это не сработает ... – TimeString

Если вы берете' background-color: # ddd' из встроенного стиля и добавьте его, используя css, тогда вам не придется использовать '! important' –

Как мне переопределить стиль наведения div в теге привязки?

ответ

Смежные вопросы