Question

所以我有点问题。当你的鼠标悬停在一个盒子上时，我正试图显示一个图像。但是图像不是图像分开的框。我也需要在左侧。那么当其他东西被激活时，是否可以调用图像来显示自己？

这是将要悬停的盒子。

    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;
    }

＆LT;＆GT; 所以我需要能够在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>

Answer 1

也许你可以这样做：

激活者：

<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

Answer 2

使用jQuery将类应用于.leftbox，然后使用它来显示图像。

$('li.rightbox2').hover(function() {
    $('li.leftbox').toggleClass('hovered');
});

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;
}
li.leftbox {
    position: fixed;
    left:0;
    top:0;
    width:478px;
    height:630px;
    border:2px;
    border-style: solid;
    border-color: #FFFFFF;
    margin: 0px;
}
li.leftbox.hovered {
    background: url(image-folder/image.png) no-repeat 50% 50%;    
}

如何在盒子悬停时显示图像？

2 个答案: