Question

我有一个列布局设计，左边会有一些字段，并且 - 当悬停一个这样的字段时 - 右边的信息。但是，我似乎无法让它发挥作用。请让我知道你的想法。

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

HTML：

<div id="content">
    <div class="content-left">
         <p class="one">This is page1 left content</p>

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

CSS：

.content-left{
    background-color: #bcc5d8;
    display: inline-block;
    float: left;
    width: 75%;
    margin-left:15px;
    margin-right:5px;
}

.content-right{
    background-color: lightsteelblue;
    display: inline-block;
    margin-right:15px;
    //margin-bottom:16px;
}

.one_info{
    opacity:0;
}

.one:hover .one_info{
    opacity:1;
}

动议准则： https://jsfiddle.net/828qthhq/3/

Answer 1

你的CSS的编写方式是.one_info如果是.one的孩子，则只会得到1的不透明度。

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

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

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

Answer 2

正如其他人所说，你做这件事的方式有点过时了！这是一个使用javascript的解决方案！我将onmouseover和onmouseout事件添加到第一个div，它调用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>

HTML / CSS悬停在列布局中无法正常工作

2 个答案: