是否可以使用相同的类但不同的标题标签设置不同的链接样式？

Question

仍在我的网站上工作，无法访问 HTML。

我想知道是否可以为图像 link 创建不同的悬停状态，其中 parent 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 更改了所有 link 的悬停状态，但我想为每个 link 创建不同的状态是另一回事了。

感谢您的指导:)

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;
}

你也可以查看这个fiddlehttps://jsfiddle.net/qh8fmj1k/

是否可以使用相同的类但不同的标题标签设置不同的链接样式？

Is it possible to style differently links with same classes but different title tags?

html

css

anchor

hover

是否可以使用相同的 类 但不同的标题标签设置不同的链接样式？

Is it possible to style differently links with same classes but different title tags?

html

css

anchor

hover

是否可以使用相同的类但不同的标题标签设置不同的链接样式？