Question

仍在我的网站上工作而无法访问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改变所有链接的悬停状态，但我想为每个链接创建一个不同的状态是另一个故事。

感谢您的指导：）

Answer 1

您可以使用属性选择器。

.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>

Answer 2

为什么不使用ID对img标记进行分类，并在css中使用这些ID。

<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中使用这些ID：

.project-panel .pp-thumb #category1{

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

}

Answer 3

只需添加以下CSS

即可

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

你也可以查看这个小提琴https://jsfiddle.net/qh8fmj1k/

是否可以设置具有相同类但不同标题标签的不同链接？

3 个答案: