HTML/CSS悬停在列布局中无法按预期工作

我有一个列布局设计，在左侧有一些字段，当悬停其中一个字段时，在右侧有关于它们的信息。然而，我似乎无法让它工作。请让我知道你的想法

编辑我完全可以灵活地更改HTML、CSS或两者。另外，如果可能的话，我不想使用javascript

HTML:

运动守则：

---

您的CSS是这样编写的：如果.one\u info是.one的子项，则其不透明度仅为1

换句话说，使用下面的HTML可以获得所需的效果

<div class="one">
    Always visible
    <div class="one_info">Show on hover</div>
</div>

始终可见
悬停显示

---

为了使用您当前的HTML并仍然获得所需的效果，您需要使用javascript。

正如其他人所说，您这样做的方式有点不对劲！下面是一个使用javascript的解决方案！我在第一个div中添加了onmouseover和onmouseout事件，它们调用JS函数来切换不透明度

<script>
    function toggleInfo(on){
        var styleToSet;    
        if(on){
            styleToSet = "opacity:1";
        } else{
            styleToSet = "opacity:0";
        }

        document.getElementById("test").style=styleToSet;   
    }
</script>

<div id="content">
    <div class="content-left" onmouseover="toggleInfo(1)" onmouseout="toggleInfo(0)">
         <p class="one">This is page1 left content</p>

    </div>
    <div class="content-right">
         <p id="test" class="one_info">This is page1 right content</p>
    </div>
</div>

功能切换信息（打开）{
var-styleToSet；
如果（打开）{
styleToSet=“不透明度：1”；
}否则{
styleToSet=“不透明度：0”；
}
document.getElementById（“test”）.style=styleToSet；
}
这是第1页的左侧内容
这是第1页右侧的内容

不幸的是，这并不那么容易。您需要重新构造HTML以使其正常工作。当前，您的CSS

：hover

正在更改

中嵌套的
.one
的不透明度。这不符合上面概述的
结构。一个
不包含任何元素。
<div class="one">
    Always visible
    <div class="one_info">Show on hover</div>
</div>

<script>
    function toggleInfo(on){
        var styleToSet;    
        if(on){
            styleToSet = "opacity:1";
        } else{
            styleToSet = "opacity:0";
        }

        document.getElementById("test").style=styleToSet;   
    }
</script>

<div id="content">
    <div class="content-left" onmouseover="toggleInfo(1)" onmouseout="toggleInfo(0)">
         <p class="one">This is page1 left content</p>

    </div>
    <div class="content-right">
         <p id="test" class="one_info">This is page1 right content</p>
    </div>
</div>