Можно ли по-разному стилизовать ссылки с одинаковыми классами, но с разными тегами заголовков? - PullRequest
Новая
       34

Можно ли по-разному стилизовать ссылки с одинаковыми классами, но с разными тегами заголовков?

0 голосов
/ 17 мая 2018

Все еще работаю на моем сайте без доступа к HTML.

Я хотел бы знать, возможно ли создавать различные состояния наведения ссылок на изображения, где у родительских элементов div одинаковые имена, но разные теги заголовков.

Код: 

.project-panel .pp-thumb img {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 170px;
  height: 127px;
}

.project-panel .pp-thumb:hover img {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://couill.art/wp-content/uploads/2018/05/Thicc-Girls-thumb.gif) no-repeat;
  width: 170px;
  /* Width of new image */
  height: 127px;
  /* Height of new image */
  padding-left: 170px;
  background-size: contain;
}
<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
  <a href="http://couill.art/project/danger-zone-duplicate-3" title="Danger Zone"><img src="http://couill.art/wp-content/uploads/2018/05/Thicc-Girls-thumb.png" width="200" height="150"></a>
  <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/danger-zone-duplicate-3" title="Danger Zone">Danger Zone</a><span data-font="font_dqju2lgtu">Animation</span></p>
</div>

<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
  <a href="http://couill.art/project/danger-ii" title="Danger II"><img src="http://couill.art/wp-content/uploads/2018/05/chauve-souris-0-00-02-19.png" width="200" height="150"></a>
  <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/danger-ii" title="Danger II">Danger II</a><span data-font="font_dqju2lgtu">Animation</span></p>
</div>

Мне удалось изменить состояние наведения для всех ссылок с CSS выше, но я думаю, создание другого состояния для каждой ссылки - это отдельная история.

Спасибо за ваше руководство:)

Ответы [ 3 ]

0 голосов
/ 17 мая 2018

Почему бы не классифицировать ваши теги img по идентификаторам и использовать эти идентификаторы в css. 

<img id="category1" src="http://couill.art/wp-content/uploads/2018/05/Thicc-Girls-thumb.png" width="200" height="150"></a>


<img id="category2" src="http://couill.art/wp-content/uploads/2018/05/chauve-souris-0-00-02-19.png" width="200" height="150"></a>

Теперь используйте эти идентификаторы в css: 

.project-panel .pp-thumb #category1{

}
.project-panel .pp-thumb #category2{

}
0 голосов
/ 17 мая 2018

Просто добавьте следующее CSS

.pp-thumb a[title="Danger Zone"]:hover{
  color: red;
}
.pp-thumb a[title="Danger II"]:hover{
  color: yellow;
}

Вы также можете проверить эту скрипку https://jsfiddle.net/qh8fmj1k/

0 голосов
/ 17 мая 2018

Вы можете использовать селектор атрибута. 

.project-panel .pp-thumb img {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 170px;
  height: 127px;
}

.project-panel .pp-thumb:hover img {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://couill.art/wp-content/uploads/2018/05/Thicc-Girls-thumb.gif) no-repeat;
  width: 170px;
  /* Width of new image */
  height: 127px;
  /* Height of new image */
  padding-left: 170px;
  background-size: contain;
}

a[title="Danger Zone"]:hover>img {
  background: red;
}

a[title="Danger II"]:hover>img {
  background: #00ff11;
}
<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
  <a href="http://couill.art/project/danger-zone-duplicate-3" title="Danger Zone"><img src="http://couill.art/wp-content/uploads/2018/05/Thicc-Girls-thumb.png" width="200" height="150"></a>
  <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/danger-zone-duplicate-3" title="Danger Zone">Danger Zone</a><span data-font="font_dqju2lgtu">Animation</span></p>
</div>

<div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
  <a href="http://couill.art/project/danger-ii" title="Danger II"><img src="http://couill.art/wp-content/uploads/2018/05/chauve-souris-0-00-02-19.png" width="200" height="150"></a>
  <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/danger-ii" title="Danger II">Danger II</a><span data-font="font_dqju2lgtu">Animation</span></p>
</div>
...