Javascript CSS。悬停文本。显示多个图像
我对网页设计还不熟悉，这只是一种爱好。我正试图为自己建立一个小网页 我想有图像出现在“相同的位置” 我有一种菜单栏，上面有一个标题，悬停在菜单栏上，然后显示图像 我在另一个容器中显示菜单栏时遇到一些问题。使用JavaScript是一种解决方案吗 作为一种变通方法，我让图像显示在文本下方。这是合适的，但不是首选 问题是我似乎不能在CSS中添加多个Javascript CSS。悬停文本。显示多个图像,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,我对网页设计还不熟悉，这只是一种爱好。我正试图为自己建立一个小网页 我想有图像出现在“相同的位置” 我有一种菜单栏，上面有一个标题，悬停在菜单栏上，然后显示图像 我在另一个容器中显示菜单栏时遇到一些问题。使用JavaScript是一种解决方案吗 作为一种变通方法，我让图像显示在文本下方。这是合适的，但不是首选 问题是我似乎不能在CSS中添加多个.image和.text变量。他们似乎有点过头了。我尝试复制div容器，并添加重复的类来匹配我在网上找到的类。即： .text2 .image2 .hov
.image.textdiv.text2
.image2
.hover_container2
<!DOCTYPE html>
<html>
<head>
<style>
.item1{
position:relative fixed;
}
img {
position:relative;
top:5%;
left:5%;
opacity: 0; /* Change this to .5 for 50% opacity */
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
img:hover {
opacity: 1;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
div.hover_container
{
width: 100px; /* set a fixed width */
height: 900px; /* set a fixed height */
margin:-45px;
}
div.hover_container .text
{
display:block; /* shown as a block-type element by default, visible */
width: 100px; /* same width as container */
height: 100%; /* same height as container */
}
div.hover_container .image
{
display: none; /* hidden by default */
width: 100px; /* same width as container */
height: 100%; /* same height as container */
}
div.hover_container .image img
{
max-width: 900px; /* width of the image */
max-height: 900px; /* height of the image */
padding-left: 20px;
margin:0;
}
div.hover_container:hover .text
{
display: none; /* hidden when hovering the container */
}
div.hover_container:hover .image
{
display: block; /* shown when hovering the container */
}
</style>
</head>
<body>
<ul>
<li><a href="#home">viking</a></li>
</ul>
<div class="hover_container">
<div class="text"></div>
<div class="text2"></div>
<div class="image">
<img src="valerie_purple3_tn.png" alt="" />
</div>
</div>
</div>
<div style="margin-left:10%;padding:1px 16px;height:1000px;">
</div>
</body>
</html>
.项目1{
位置：相对固定；
}
img{
位置：相对位置；
最高：5%；
左：5%；
不透明度：0；/*对于50%的不透明度，将其更改为.5*/
-webkit转换：.5s；
-moz转变：.5s；
-ms转换：.5s；
-o-转变：.5s；
过渡：.5s；
}
img：悬停{
不透明度：1；
}
身体{
保证金：0；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#000；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
背景色：#111；
}
悬停舱
{
宽度：100px；/*设置固定宽度*/
高度：900px；/*设置固定高度*/
利润率：-45px；
}
div.hover\u container.text
{
显示：块；/*默认情况下显示为块类型元素，可见*/
宽度：100px；/*与容器宽度相同*/
高度：100%；/*与容器高度相同*/
}
div.hover\u容器图像
{
显示：无；/*默认情况下隐藏*/
宽度：100px；/*与容器宽度相同*/
高度：100%；/*与容器高度相同*/
}
div.hover\u容器图像img
{
最大宽度：900px；/*图像宽度*/
最大高度：900px；/*图像高度*/
左侧填充：20px；
保证金：0；
}
div.hover\u容器：hover.text
{
显示：无；/*悬停容器时隐藏*/
}
div.hover\u容器：hover.image
{
显示：在悬停容器时显示block；/**/
}