我想将可链接 Div 的 :Visited 状态设为图像，这可能吗？答案

【问题标题】：I Want To Make The :Visited State of a Linkable Div An Image, Is This Possible?我想将可链接 Div 的 :Visited 状态设为图像，这可能吗？
【发布时间】：2016-11-24 06:24:16
【问题描述】：

我想使可链接 div 的 :visited 状态成为图像，我试图使 div 的 :visited 状态从具有白色背景颜色变为有问题的背景图像，但这并没有似乎不起作用。

我希望 #gridone 的 :visited 状态为：

我很难在网上找到如何做到这一点，我想知道是否可以做到。

我希望网格中的每个 div 都有一个特定的图像来表示它的 :visited 状态。我目前正在尝试#gridone 以查看这是否可行，方法是将背景颜色替换为处于 :visited 状态的背景图像，但它似乎不起作用。是否有其他方法可以实现这一点？我是否错误地尝试了这个？提前感谢您的帮助。

#gallery {
  background-color: blue;
  height: 1400px;
  width: 100%;
}
#gallery a{
  color: white;
}
#gallerytext {
  width: 900px;
  margin: auto;
  padding-top: 30px;
}
#grid {
  margin: auto;
  width: 830px;
}
#gridone {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridone:visited {
  background-image: url("images/galleryimageone.jpg");
  color: red;
  display: block;
  float: left;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridtwo {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridthree {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridfour {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridfive {
  background-color: white;
  color: blue;
  display: block;
  float: right;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
#gridsix {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  margin-top: 30px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}

<div id="gallery">
      <div id="gallerytext">
        <p>The Gallery</p>
        <p>This website is showcases the incredible work of influential women artists from the past and present.</p>
      <div id="grid">
        <a href="http://google.com">
          <div id="gridone">
             The Dinner Party<br>
             Judy Chicago
          </div>
        </a>
        <a href="http://google.com">
          <div id="gridtwo">
             A Subtlety<br>
             Kara Walker
          </div>
        </a>
        <a href="http://google.com">
          <div id="gridthree">
             Alma Silueta en Fuego<br>
             Ana Mendieta
          </div>
        </a>
        <a href="http://google.com">
          <div id="gridfour">
             Black Iris<br>
             Georgia O'Keeffe
          </div>
        </a>
        <a href="http://google.com">
          <div id="gridfive">
             The Two Fridas<br>
             Frida Kahlo
          </div>
        </a>
        <a href="http://google.com">
          <div id="gridsix">
             Judith Slaying Holofernes<br>
             Artemesia Gentileschi
          </div>
        </a>
      </div>

【问题讨论】：

标签： html css

【解决方案1】：

这里的问题是获取访问状态的不是<div> - 它是包围它的<a>。因此，要在访问的锚标记中定位 #gridone，您需要 CSS 选择器：

a:visited #gridone

这是一个更新（略微修剪）的带有选择器的 sn-p：

#gallery {
  background-color: blue;
  height: 1400px;
  width: 100%;
}
#gallery a {
  color: white;
}
#gallerytext {
  width: 900px;
  margin: auto;
  padding-top: 30px;
}
#grid {
  margin: auto;
  width: 830px;
}
#gridone {
  background-color: white;
  color: blue;
  display: block;
  float: left;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}
a:visited #gridone {
  background-image: url("images/galleryimageone.jpg");
  color: red;
  display: block;
  float: left;
  height: 200px;
  padding-top: 20px;
  padding-left: 25px;
  width: 400px;
}

<div id="gallery">
  <div id="gallerytext">
    <p>The Gallery</p>
    <p>This website is showcases the incredible work of influential women artists from the past and present.</p>
    <div id="grid">
      <a href="http://google.com">
        <div id="gridone">
          The Dinner Party
          <br>Judy Chicago
        </div>
      </a>
    </div>
  </div>
</div>

注意：大多数浏览器的安全限制实际上阻止了尝试使用 CSS 来影响 background-image 和 :visited 选择器。（见background-image: for :visited links?）。如果需要专门更改背景图像，则需要依赖 JavaScript 之类的东西。

希望这会有所帮助！如果您有任何问题，请告诉我。

【讨论】：

感谢您对此的解释。不过我想知道，我目前设置它的方式是整个 div 充当链接。我希望那个白框一旦被访问就变成图像，但即使改变了它，虽然文本确实变成了红色，但背景不会变成图像。如何应用它以便它也更改为图像？
@AlisonDyer 啊。做了一些进一步的研究，显然，您不能更改链接的背景图像以响应访问的事件。（请参阅background-image: for :visited links?。这是浏览器竭力阻止的事情，因此用户的隐私受到保护。您可以换出颜色或其他背景属性，但不能换出图像本身。所以最合乎逻辑的方法实际上不会在这里工作。
@AlisonDyer 不幸的是，如果在访问链接后必须更改背景图像（而不仅仅是一些其他视觉属性），您将需要使用 JavaScript 之类的东西来回避这个问题限制。
感谢 Serlite 提供的信息！对此，我真的非常感激。我会自己做一些研究。

【解决方案2】：

:visited 仅适用于<a> 标签（因为它们是您可以“访问”的链接，而<div>s 则不是）。有关更多详细信息，请参阅 here 和 here。

尝试在父锚标签上使用:visiteda：

a:visited #gridone

【讨论】：