Сделайте div ссылкой и измените содержание на hover

Я пытаюсь сделать div ссылкой, и это работает, не уверен, что я сделал это правильно. Но я также хочу, чтобы тип в div менял цвет. Может кто-нибудь помочь мне, и если вы объяснить немного я буду greatfull: D Попытка узнать :)Сделайте div ссылкой и измените содержание на hover

Вот HTML

<div class="song_feature"> 
     <a href="#"></a> 
     <div class="song_feature_content"> 
      <div class="break32"></div> 
      <h1>1</h1> 
      <div class="break10"></div> 
      <div class="break45"></div> 
      <h2>Lorem ipsum title</h2> 
      <div class="break10"></div> 
      <p>lorem ipsum</p> 
     </div> 
    </div>

И CSS

.song_feature:hover { 
background-color: #B5B5B5; 
cursor: pointer; 
}

источник

2013-03-11 John John

Прежде всего, каков ваш вопрос, конкретнее о вашем вопросе –

Это проще если вы используете jQuery.

HTML:

<div class="song_feature"> 
    <a href="#" id="hover">Hover here</a> 
    <div class="song_feature_content"> 
     <div class="break32"></div> 
     <h1>1</h1> 
     <div class="break10"></div> 
     <div class="break45"></div> 
     <h2>Lorem ipsum title</h2> 
     <div class="break10"></div> 
     <p>lorem ipsum</p> 
    </div> 
</div>

JS:

$('#hover').hover(function(){ 
    $('.song_feature').css('background-color', '#f00'); 
});

пробег: http://jsfiddle.net/cS6h8/

источник

2013-03-11 09:04:08 Ovilia

Это своего рода перебор. – LeBen

Просто попробуйте это в вашем CSS:

.song_feature:link { 
    background-color: #000; 
    cursor: pointer; 
} 
.song_feature:visited { 
    background-color: #000; 
    cursor: pointer; 
} 
.song_feature:hover { 
    background-color: #B5B5B5; 
    cursor: pointer; 
} 
.song_feature:active { 
    background-color: #000; 
    cursor: pointer; 
}

Цвет фона будет черным у Когда мышь нависает над ним. Просто измените цвет соответствующим образом.

источник

2013-03-11 09:04:13

Хорошо, спасибо, спасибо :) Но я также пытаюсь изменить цвет текста при перевертывании. Я получил текст, чтобы изменить цвет, когда я просматриваю текст, но не div. Есть ли способ изменить его, когда я перехожу на div? –

Хм, я уверен, что ты сможешь, но я не знаю, как это сделать. Возможно, подумайте над тем, чтобы добавить это к вопросу и быть более конкретным, чтобы люди могли вам помочь. –

Прежде всего обернуть a вокруг div

<div class="song_feature"> 
    <a href="#"> 
    <div class="song_feature_content"> 
     <div class="break32"></div> 
     <h1>1</h1> 
     <div class="break10"></div> 
     <div class="break45"></div> 
     <h2>Lorem ipsum title</h2> 
     <div class="break10"></div> 
     <p>lorem ipsum</p> 
    </div> 
     </a> 
</div>

И если «типа в DIV» вы имеете в виду текст (я предполагаю здесь) типа color:#your color так:

.song_feature:hover { 
background-color: #B5B5B5; 
    cursor: pointer; 
} 

.song_feature:hover a { 
    color:#edc844;/*some random color*/ 
    }

Это работает в IE7 +, последней версии Mozilla, Safari, Chrome

источник

2013-03-11 09:04:23 Tbi45

Возможно, это одно из решений, но я вижу, как вы его кодируете! 'div' внутри' a' make ** w3c ** error – jhunlio

Im пытается это, но текст не меняет цвет, когда я перевернусь над div aerea. –

Тег '' не наследует цвета от родительских элементов. Но не бойтесь, потому что решение здесь. Я повторил свой ответ. – Tbi45

Я предлагаю вам сделать обратное.

<a href="#" class="song_feature"> 
    <div class="song_feature_content"> 
     <div class="break32"></div> 
     <h1>1</h1> 
     <div class="break10"></div> 
     <div class="break45"></div> 
     <h2>Lorem ipsum title</h2> 
     <div class="break10"></div> 
     <p>lorem ipsum</p> 
    </div> 
</a> 

.song_feature { 
    display: block; 
} 

.song_feature:hover { 
    background-color: #B5B5B5; 
}

источник

2013-03-11 09:17:33 LeBen

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

Отметьте, что я не сказал “ не смог ” включить их: ссылки уровня блока почти всегда работали так, как вы ожидали, это просто не пройдет проверку. С HTML5 paving the cowpaths, теперь это исправлено. Согласно этой статье HTML Doctor:

Одна новой и захватывающая вещь, вы можете сделать в HTML 5, обертка ссылка круглых элементов «блочных» ... удаление дупликации и гораздо более широкий хит области кликать.

Короче говоря, @ решение Tbi45 является путь: обернуть a вокруг div. Он уменьшает повторение, проверяет (как HTML5) и не требует JavaScript.

Отъезд this fiddle для примера.Важным является CSS:

.song_feature>a { 
    display: block; 
}

который гарантирует, что все содержимое div кликабельна.

источник

2013-03-11 09:34:46 CherryFlavourPez

Сделайте div ссылкой и измените содержание на hover

ответ

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