将鼠标悬停在图片上时更改文字，文字与图片的位置不同
[英]Change Text when hovering over image, text is in a different location then image
问题描述
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). 因此，如果我将鼠标悬停在一个湖泊上，那么湖泊desc将显示在另一个框中（我们称之为desc框）。 then if I hover over a duck the desc of that duck will be displayed in that same desc box. 然后，如果我将鼠标悬停在鸭子上，该鸭子的desc将显示在同一desc框中。
Is there any way using onmouseover to set 有没有办法使用onmouseover进行设置
根据悬停的内容显示文本。
so if A duck image is being hovered over the predefined text lets say var DuckImage="A duck is an animal";
因此，如果将鸭子图像悬停在预定义文本上，则可以说var DuckImage =“鸭子是动物”；
is displayed in HoverOverDesc when that duck image is hovered over.
当该鸭子图像悬停在HoverOverDesc中时，会显示。
3 个解决方案
解决方案1
3 2019-05-19 04:57:18
If I understand your question, you want a grid of images to the right on the screen, where each image has predefined text that is displayed on the left side of the screen if the user hovers that image. 如果我理解您的问题，则需要在屏幕右侧显示一个图像网格，其中每个图像都有预定义的文本，如果用户将鼠标悬停在屏幕上，该文本将显示在屏幕左侧。
This can be achieved via CSS and HTML, without any JavaScript as shown below. 可以通过CSS和HTML来实现，而无需任何JavaScript，如下所示。 Please see the comments in the snippet for further explanation: 请查看摘要中的注释以获取进一步的解释：
.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 ap { /* 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>
解决方案2
1 2019-05-19 04:56:59
one way of get this done could be have the grid and the message container in a parent container and use the general sibling selector, the sample I put bellow do that is not perfect but it work, other way that you could use is with javascript using onmouse over on the grid cells and maybe a dataattribute in order to make it more dynamic. 一种完成此方法的方法可能是将网格和消息容器放在父容器中，并使用常规的同级选择器，但我放到下面的示例中这样做并不完美，但它可以正常工作，您可以使用的另一种方法是使用javascript鼠标放在网格单元上，并可能添加数据属性以使其更加动态。 : ：
<!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>
the example bellow contains javascript, this is one of the approach that you could use, I decide to use data attribute that let customize with values and customize, css should work with it and you could query( as in the example and create too with . setAttribute ('data', "your attribute name",...; but there are other way. 下面的示例包含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>
解决方案3
1 2019-05-22 00:18:44
<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 = ' '" />
Some where else 别的地方
<h4 class="w3-bar-item"><b>Description</b></h4>
<div style="margin-left:8px">
<p id="HoverOverInfo" name=></p>
This worked perfectly for me! 这对我来说很完美！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.