我想让：可访问的Div的访问状态图像，这可能吗？

Question

我想让一个可链接的div的访问状态成为一个图像，我试图让它：div的访问状态从具有白色背景颜色变为有问题的背景图像，但这不是似乎工作。

我想要的背景图片：#gridone的访问状态为：

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

我希望网格中的每个div都有一个特定的图像：访问状态。我正在尝试使用#gridone来查看这是否可行，方法是将背景颜色替换为其访问状态的背景图像，但它似乎不起作用。是否有其他方法可以实现这一目标？我试错了吗？感谢您提前提供任何帮助。

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

Answer 1

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

a:visited #gridone

这是一个更新的（略微修剪过的）片段，其中有选择器：

#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之类的东西。

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

Answer 2

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

尝试在父锚标记上使用:visited a：

a:visited #gridone