html - ホバー時のオーバーレイ画像、動的サイズの div

Question

だからここに私が持っているものがあります：

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

私がやりたいことはこれです: classoverlayで div をロールオーバーするたびに、半透明の 5px x 5px 画像を div にオーバーレイします。div の幅と高さを埋めるために、画像を繰り返す必要があります。

これを行う最善の方法は何ですか？私の最初の考えは、そのクラスでdivをロールオーバーするたびに、ロールオーバーしているdivとまったく同じ幅と高さを持つ絶対配置のdivを動的に作成し、その新しいdivには透明な繰り返しの背景画像があるということでした。

Answer 1

疑似要素を使用できます。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/edit

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>

Answer 2

CSS ホバーは機能しますか?

 .overlay:hover {
    background: url("/your/img.png");
 }