将鼠标悬停在图片上，将图片放在动态尺寸的div上 [英] Overlay image on hover, on dynamically-sized div

问题描述

这就是我所拥有的:

<div class="overlay">
    <p>text text</p>
</div>

<div class="overlay">
    <p>text text text text text text</p>
    <p>text text text text text text</p>
    <p>text text text text text text</p>
    <p>text text text text text text</p>
</div>

我想做的是:每当我将鼠标移到类为overlay的div上时，我都希望一个半透明的5px x 5px图像覆盖div.图片必须重复才能填满div的宽度和高度.

What I want to do is this: whenever I rollover a div with the class overlay, I want a semi-transparent 5px x 5px image to overlay the div. The image would have to repeat to fill up the width and height of the div.

执行此操作的最佳方法是什么?我最初的想法是，每当我在该类上滚动div时，我都会动态创建一个绝对定位的div，该div具有与我要滚动的div相同的宽度和高度，并且该新div具有透明的重复背景图像. >

What's the best way to do this? My initial thought was whenever I rollover a div with that class, I dynamically create an absolute positioned div that has the same exact width and height of the div I'm rolling over, and that new div has the transparent repeating background image.

推荐答案

您可以使用伪元素，而无需JS:

You can use pseudo elements, no need for JS:

div.overlay { 
  position: relative;
}
div.overlay:hover:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(img.png);
  opacity: .5; /* if needed */
}

演示: http://jsbin.com/ayesec/3/编辑

div.overlay {
  position: relative;
  width: 300px;
  background: yellow;
}

div.overlay:hover:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(https://placekitten.com/5/5);
  opacity: .5;
}

<div class="overlay">
  <p>text text text text text text</p>
  <p>text text text text text text</p>
  <p>text text !!HOVER!! text text</p>
  <p>text text text text text text</p>
  <p>text text text text text text</p>
</div>

这篇关于将鼠标悬停在图片上，将图片放在动态尺寸的div上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！