Question

我有一个JSON数组，已将其格式化为HTML格式并使用CSS设置样式。使用console.log可以显示阵列中的所有内容。有谁知道我如何获得鼠标悬停效果，从而在图像上显示图像详细信息，例如“标题”和“标签”信息。

我在下面的链接中找到了我所需要的，但是我很困惑如何在下面的链接中使用javascript实现它- https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

确实尝试学习Java脚本，但是在该主题上找不到任何有用的东西。

const cont = document.querySelector(".cont");
const imageTitle = document.querySelector(".imageTitle");
const images = [{
    "src": "image1.jpeg",
    "title": "A two tone wall",
    "tags": ["wall", "two tone"]

  },
  {
    "src": "image2.jpeg",
    "title": "Cute doggy",
    "tags": ["dog", "walkies "]
  },
  {
    "src": "image3.jpeg",
    "title": "Natural splendor",
    "tags": ["natural", "mountain"]
  },
  {
    "src": "image4.jpeg",
    "title": "Man looking at phone",
    "tags": ["man", "phone"]
  },
  {
    "src": "image5.jpeg",
    "title": "Wavey wave",
    "tags": ["water", "wave"]
  },
  {
    "src": "image6.jpeg",
    "title": "Mountain range",
    "tags": ["mountain", "grass"]
  }


];
images.forEach(function(par) {
  cont.innerHTML += `<img src="${par.src}" content="${par.tags}" alt="${par.title}">`;
});

.cont {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

img {
  width: 400px;
  height: 300px;
  margin: auto;
}

<div class="cont">
</div>

Answer 1

w3school示例已经为您解决了。

images.forEach(function(par) {
  cont.innerHTML += `<div class="image-wrapper">
    <img src="${par.src}" content="${par.tags}" alt="${par.title}">
    <p class="image-desc">
        <span>Title: ${par.title}</span>
        <span>Tags: ${par.tags.join(', ')}</span>
    </p>
  </div>`;
});

将CSS类添加为

.image-wrapper {
    position: relative;
}
.image-wrapper image-desc{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}
.image-wrapper:hover image-desc{
    display: block;
}

Answer 2

我是用纯CSS制作的

const cont = document.querySelector(".cont");

const images = [
    {
        "src": "https://picsum.photos/300/200",
        "title": "A two tone wall",
        "tags": ["wall", "two tone"]

    },
    {
    "src": "https://picsum.photos/320/200", 
    "title": "Cute doggy", 
    "tags": ["dog", "walkies"]
},
{
    "src": "https://picsum.photos/330/200",
    "title": "Natural splendor", 
    "tags": ["natural", "mountain"]
},
{
    "src": "https://picsum.photos/300/210",
    "title": "Man looking at phone", 
    "tags": ["man", "phone"]
},
{
    "src": "https://picsum.photos/300/220",
    "title": "Wavey wave",
    "tags": ["water", "wave"]
},
{
    "src": "https://picsum.photos/300/230",
    "title": "Mountain range",
     "tags": ["mountain", "grass"]
    }

];

images.forEach(function(par){
  cont.innerHTML += `<div class="parent"><img src="${par.src}" alt="${par.title}"><div class="overlay"><div>${par.title}</div><div>${par.tags[0]}, ${par.tags[1]}</div></div></div>`;
});

.cont {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

img, .parent {
  width: 400px;
  height: 300px;
  margin: auto;
  position: relative;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  width:400px;
  height:300px;
  background: #000;
  opacity:0;
  z-index:2;
  transition:.5s;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  font-size:24px;
  font-family:"Segoe UI",sans-serif;
  flex-direction:column;
}

.overlay div:nth-child(2) {
  margin-top:20px;
  font-size:16px;
}

.parent:hover .overlay{
  opacity:.9;
}

<div class="cont">
</div>

创建鼠标悬停效果以使用Javascript描述图像

2 个答案: