gpt4 book ai didi

html - 如何在将鼠标悬停在框上时显示图像?

转载 作者:行者123 更新时间:2023-11-28 17:07:19 26 4
gpt4 key购买 nike

所以我遇到了一些问题。当您的鼠标悬停在一个框上时,我正在尝试显示图像。但是,图像不是图像独立的框。我也需要它在左手边。那么是否可以在其他东西被激活时调用一个图像来显示自己呢?

这是悬停的框。

    li.rightbox2 {
position: fixed;
top: 0px;
right: 0px;
float: center;
width:430px;
height:200px;
border:2px;
border-style: solid;
border-color: #FFFFFF;
margin:0px;
opacity: 0.2;

}
li.rightbox2:hover {
text-decoration: underline;
opacity: 1.0;
}

and here is where i want the image

li.leftbox {
position: fixed;
left:0;
top:0;
width:478px;
height:630px;
border:2px;
border-style: solid;
border-color: #FFFFFF;
margin: 0px;
}

<> 所以我需要能够在 li.rightbox css 类中调用图像? 这可能吗?可以不用 Javascript 吗?

The HTML is:

<!DOCTYPE html>

<head>
<meta charset="utf-8" />
<link rel="styleSheet" type="text/css" href="CSS\style.css"/>

<title> GTM HOME </title>

</head>

<body>

<nav>
<ul>
<li class="leftbox"><a href="index.html">HOME</a></li>
<li class="rightbox1"><a href="lineup.html">LINEUP</a></li>
<li class="rightbox2"><a href="event-info.html">EVENT INFO</a></li>
<li class="rightmiddle"><a href="tickets.html">TICKET</a></li>
<li class="rightlower"><a href="enquiries.html">ENQUIRIES</a></li>
</ul>
</nav>

<main>
<img class="mainm" src="images\lineupp.jpg"/>

</main>

<video id="backgroundvid" autoplay loop poster>
<source src="videos\backgroundvid.mp4" type="video/mp4">
</video>
</div>

</body>

</html>

最佳答案

也许你可以这样做:

激活剂:

<div onMouseOver="showImage()" onMouseOut="hideImage()">...</div>

图像容器

<div id="imgDiv"></div>

然后:

<script>
showImage() {
document.getElementById("imgDiv").innerHTML='<img src="path/to/img" alt="img" \>';
}
hideImage() {
document.getElementById("imgDiv").innerHTML='';
}
</script>

如果没有 Javascript,也许这可以解决您的问题,但它确实不太灵活:CSS - Rollover one element, and make another element visible

关于html - 如何在将鼠标悬停在框上时显示图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30053651/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com