I have some images in a grid-like area and when one is hovered over I would like it so the text on the left-hand side of the screen changes to a predefined description of that image, for every image it will do this and display the text in the same area. Any help would be much appreciated I've been trying to get it for hours now.
The text needs to be displayed in the same area. so if I hover over a lake, the lakes desc will be displayed in another box (let's call it desc box). then if I hover over a duck the desc of that duck will be displayed in that same desc box.
Is there any way using onmouseover to set
to show text depending whats being hovered over. so if A duck image is being hovered over the predefined text lets say var DuckImage="A duck is an animal"; is displayed in HoverOverDesc when that duck image is hovered over.答案 0 :(得分：3)
如果我理解您的问题，那么您希望在屏幕右侧显示一列图像，如果用户将鼠标悬停在该图像上，则每个图像都有预定义的文本，该文本会显示在屏幕的左侧。
这可以通过CSS和HTML来实现，而无需任何JavaScript，如下所示。请查看摘要中的评论以获取进一步的解释：
.grid {
/* Put 50% white space to the left of the image grid
which provides the space for descriptions to appear */
padding-left:50%;
/* Specify a basic grid layout for images in the grid */
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.grid img {
/* Cause each image to not exceed the grid cell's width */
max-width:100%;
}
.grid a p {
/* With width of description cannot exceed half page width. If text
description is too long, this causes it to wrap onto multiple lines
at the 50% point */
width:50%;
/* Fixed position ensures the description is placed at top left of
screen (by default) regardless of scroll position */
position:fixed;
top:0;
left:0;
/* Do not show description by default */
display:none;
}
.grid a:hover p {
/* When hovering the a around an image, cause it's description to
be shown */
display:block;
}<div class="wrapper">
<div class="grid">
<a href="#">
<p>Pre defined text for blue image</p>
<img src="https://via.placeholder.com/350/00f.png" alt="blue" />
</a>
<a href="#">
<p>Pre defined text for red image</p>
<img src="https://via.placeholder.com/350/f00.png" alt="red" />
</a>
<a href="#">
<p>Pre defined text for green image</p>
<img src="https://via.placeholder.com/350/0f0.png" alt="green" />
</a>
<a href="#">
<p>Pre defined text for yellow image. Lots of text can be specified,
which will wrap on to a new line.</p>
<img src="https://via.placeholder.com/350/ff0.png" alt="green" />
</a>
</div>
</div>
答案 1 :(得分：1)
完成此操作的一种方法可能是将网格和消息容器放在父容器中，并使用常规的同级选择器，下面我放的示例虽然并不完美，但可以正常工作，而您可以使用的另一种方法是使用javascript在网格单元上使用onmouse并可能添加数据属性以使其更加动态。 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.grid-area{
width:800px;
height: 600px;/* theses values are only for test define your as you wish*/
position: relative;
top:50px;
left:100px;
background:#444;
display: inline-flex;
justify-content: space-around;
flex-wrap: wrap;
}
.grid-area >.img{
width: 150px;
height:150px;
background:blue;
margin:20px;
border:2px solid rebeccapurple;
}
.text-artifact{
position: absolute;
bottom:10px;
left: -20px;
width: 100%;
height: 100px;
background:#4354FF;
}
.text-artifact *{
display: none;
text-align: center;
color:white;
font-weight: bolder;
text-shadow: 1px 2px 3px #434343;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size:2em;
}
.img:hover{
background: yellow;
}
.img:hover ~ .text-artifact{
background: white;
}
.img1:hover ~ .text-artifact .text1{
display:block;
}
.img2:hover ~ .text-artifact .text2{
display:block;
}
.img3:hover ~ .text-artifact .text3{
display:block;
}
.img4:hover ~ .text-artifact .text4{
display:block;
}
.img5:hover ~ .text-artifact .text5{
display:block;
}
</style>
</head>
<body>
<div class="grid-area">
<div class="img1"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="img2"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="img3"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="img4"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="img5"><img src="https://via.placeholder.com/150"alt=""></div>
<div class="text-artifact">
<div class="text1">This should be a description for 1</div>
<div class="text2">This should be a description for 2</div>
<div class="text3">This should be a description for 3</div>
<div class="text4">This should be a description for 4</div>
<div class="text5">This should be a description for 5</div>
</div>
</div>
</body>
</html>
下面的示例包含javascript，这是您可以使用的方法之一，我决定使用data属性，该属性允许使用值进行自定义并进行自定义，css应该与之一起使用，并且您可以进行查询（如示例中并创建。. setAttribute （'data'，“您的属性名称”，...;也可以。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.center{
width:500px;
height: 400px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
border:3px solid #434343;
}
.nested-box-bottom{
width: 100%;
height: 60px;
position: fixed;
display: inline-block;
bottom:0;
left:0px;
background: #323232;
}
#text-in-nested-box {
margin-top:10px;
width: 90%;
position: relative;
left:5%;
height: 32px;
color:white;
font-weight: bolder;
text-align: center;
}
#outside-box{
margin-top:10px;
width: 100%;
position: absolute;
top:-10px;
left:0%;
height: 49px;
color:white;
font-weight: bolder;
text-align: center;
background:#323232;
margin-bottom:20px;
}
</style>
</head>
<body>
<div class="center">
<img class="img" data-columns="1" src="https://via.placeholder.com/150"alt="">
<img class="img" data-columns="2" src="https://via.placeholder.com/150"alt="">
<img class="img" data-columns="4"src="https://via.placeholder.com/150"alt="">
<div class="nested-box-bottom">
<div id="text-in-nested-box"></div>
</div>
</div>
<div id="outside-box"></div>
<script>
const img = document.querySelectorAll('.img');
const outside = document.getElementById('outside-box');
const inside = document.getElementById('text-in-nested-box');
function display(){
const value = this.dataset.columns;
inside.innerHTML =`you are hover element with ${value}`;
outside.innerHTML =`you are hover element with ${value}`;
}
function out( ){
outside.innerHTML = "";
inside.innerHTML="";
}
for(i=0;i<img.length;i++)
{
///console.log(`setting event src ${img[i].dataset.columns }`);
img[i].addEventListener("mouseover", display, false);
img[i].addEventListener("mouseout", out, false);
}
</script>
</body>
</html>
答案 2 :(得分：1)
<img src="Images/duck.png" width="450" height="auto" onmouseover="document.getElementsByName('HoverOverInfo2')[0].innerHTML = 'A Duck'" onmouseout="document.getElementsByName('HoverOverInfo2')[0].innerHTML = ' '" />
<img src="Images/car.png" width="450" height="auto" onmouseover="document.getElementsByName('HoverOverInfo2')[0].innerHTML = 'A Car'" onmouseout="document.getElementsByName('HoverOverInfo2')[0].innerHTML = ' '" />
其他地方
<h4 class="w3-bar-item"><b>Description</b></h4>
<div style="margin-left:8px">
<p id="HoverOverInfo" name=></p>
这对我来说非常有效！