时间戳

首页 > 解决方案 > 如何将鼠标悬停事件添加到图像

javascript - 如何将鼠标悬停事件添加到图像

问题描述

我正在尝试创建一个鼠标悬停事件，该事件会将我的图像背景变为黑色，同时添加描述指向另一个网页的链接的文本。但是我在 CSS 或 JavaScript 中尝试过的所有东西都不起作用，并且出现错误，不知道如何解决问题？

var one = document.getElementById("one");
addEventListner("mouseover", link);
addEventListner("mouseout", linkOut);

function link() {
  one.style.backgroundColor = "black";
  one.textContent = "Our Games";
  one.style.textAlign = "center";
  one.style.verticalAlign = "middle";
}

function linkOut() {
  one.style.backgroundColor = "";
  one.textContent = "";
}
This is my my CSS, I think that the overlay option is not working 
do to the grid that I have set up for my images. But I am 
not quit sure why it wont work.

#dragon {
	height: 200px;
}
#chaos {
	height: 600px;
}
#logo {
	height: 150px;
}
#thunder {
	height: 600px;
}
#dice {
	height: 235px;
}
h1	{
	color: white;
	text-align: center;
  	padding: 32px;
  	padding-bottom: 0px;
}

/*--------------grid for my images--------------------------*/
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background-color: black;
}
.row {
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
}
.column {
	-ms-flex: 33.33%;
	flex: 33.33%;
	max-width: 33.33%;
	padding: 0 4px;
}
.column img {
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
}
/*--------------overlay for links--------------------------*/


.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.column:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
This is my HTML


<div class="row">

  <div class="column">
    <a id="one" href="#"><img id="chaos" src="cardchaos.jpg" alt=""></a>
  </div>

  <div class="column">
    <a id="two" href="#"><img id="dragon" src="dragon card.gif" alt=""></a>
    <a href="#"><img id="logo" src="logo.png" alt=""></a>
    <a id="three" href="#"><img id="dice" src="Img Try Again.jpg" alt=""></a>
  </div>

  <div class="column">
    <a id="four" href="#"><img id="thunder" src="Thunder Bolt.jpg" alt=""></a>
  </div>

  </div>

标签： javascripthtmlcss

解决方案

您的脚本中有错字。此外，您要做的是直接编辑元素。如果您尝试在 mouseleave 上删除元素的文本内容，您也会丢失原始元素。我建议使用 css 执行此操作。

<div class="container">
  <img src="https://images.unsplash.com/photo-1529981188441-8a2e6fe30103?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div> 

.container {
  position: relative;
  width: 300px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

看看我的例子，然后在下面我修复了你的版本发生了什么。https://codepen.io/shnigi/pen/pojQxNB

推荐阅读