在 Javascript 中为图像描述创建鼠标悬停效果答案

【问题标题】：Create mouseover effect for image description in Javascript在 Javascript 中为图像描述创建鼠标悬停效果
【发布时间】：2019-02-10 18:05:36
【问题描述】：

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

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

真的想学习 Javascript，但在这个主题上找不到任何有用的东西。

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>

【问题讨论】：

我给你做了一个sn-p。请添加一些来自 lorempixel 的图像。也不要给你的 html 标签。请全部使用小写
你的 div 在哪里，CSS 转换在哪里？
最后，w3school 是一个贫乏的资源。请搜索 SO 以获得更好的示例
谢谢。这有很大帮助。我其实明白你做了什么:)
@KyeAtkinson 你为什么删除接受的？

标签： javascript html css arrays json

【解决方案1】：

我用纯 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>

【讨论】：

【解决方案2】：

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

【讨论】：