Question

我是新手编码员。我正在使用WordPress模板（Semplice）来帮助建立我的新网站。

我想要的行为是将鼠标悬停在图片上，并显示自定义文字。我相信我可以使用工具提示或HTML5伪选择器来完成此操作。

我可以为我的主题添加自定义CSS，以及JavaScript。我还可以为我上传的图像添加自定义类。所以我认为我在CSS中的方法是：

.this-is-a-custom-class img[alt]:hover:after {
  content: attr(alt);
  position: absolute;
  top:-100%;
  left:0%;
}

但是当我在周围挖掘时，看起来那些伪选择器不能用于图像？

考虑到我只能为我的图片添加自己的自定义CSS，JavaScript和自定义类，有人可以提出解决方法吗？

Answer 1

https://codepen.io/anon/pen/jxqadW：这回答了你的问题吗？如果没有，请告诉我

如果您在理解代码时遇到问题，请不要犹豫，向我提问。

HTML：

add_node()

CSS：

conf.py

JS：

<div id="container">
  <img id="image" src= "https://picsum.photos/200/300"/>
  <div id="information">
    Hello there
  </div>
</div>

Answer 2

这是一个简单的解决方案：

$(function() {
  //get all images at detach them from the document; you can change this class name
  var allImages = $('.image-class').detach();


  //create the mark up pattern
  allImages = createMarkup(allImages);

  //add new mark up back to the document
  allImages.each(function(index, element) {
    $('.container').append(element);
  })


  function createMarkup(images) {
    var container = [];

    images.each(function(index, element) {
      var imageContainer = $('<div class="img-container"></div>');
      var imageText = $('<p class="img-container__text"></p>')

      imageText.text($(element).attr('alt'));

      imageContainer.append(element, imageText);

      container.push(imageContainer);
    });

    return $(container);
  }
});

.img-container {
  width: 300px;
  text-align: center;
  position: relative;
  margin: 100px auto;
}

.img-container__text {
  display: none;
  position: absolute;
  top: -100px;
  left: 0;
}

.img-container__img {
  width: 100%;
}

.img-container:hover>.img-container__text {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img class="image-class" src="https://www.mozilla.org/media/img/home/dino.d3d01561e288.svg" alt="Hello">
</div>

当页面加载并在作为图像父级的div上设置悬停状态时，通过jQuery动态更改标记起作用。在包含div元素的同一个元素中，我在图像悬停时要包含一个子元素，显示属性为none。

当容器悬停在上面时，保存文本的元素的显示值为block。

您希望这样做的方式不起作用，因为图像是替换元素，:: before和:: after伪元素仅适用于未替换的元素

根据MDN web docs：

由:: before和:: after生成的伪元素包含在元素的格式框，因此不适用于替换元素，如，或元素。

替代img：[alt]悬停：之后

2 个答案: