Question

我是网页设计的新手，这只是一个爱好。我正在尝试为自己设置一个小网页here。

我希望图像显示在＆＃34;相同位置＆＃34;。

我有一种菜单栏，悬停在栏上方会显示一个标题，然后会显示图像。

我在菜单栏中显示了一些问题，显示在另一个容器中。使用JavaScript会成为一种解决方案吗？

作为一种解决方法，我将图像悬停在文本下方。哪个适合但不是首选。

问题是我似乎无法在CSS中添加多个.image和.text变量。他们似乎只是过度骑行。我尝试复制div容器并添加重复的类以匹配我在网上找到的类。即：

.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>

CSS。悬停文字。出现多个图像

0 个答案: