Question

我正在使用我正在为我的网站构建的标签插件中的不透明度转换。但是，它影响了我对div的overflow: auto。只有集合中的最后一个是滚动。这个小提琴解释了我在说什么：

这是我的HTML：

<div class="content">
    <div class="tab-content active" id="breeding">
        <h1>Breeding</h1>
        <p>Want to try your chances at getting a unique combination of two of the rabbits you own? Welcome to breeding! This takes place 
            in your habitat and heavily relies on the relationship of these two rabbits. Rabbits are genderless meaning you can breed 
            any two rabbits together, given you have the correct carrot item for it.</p>
    </div>
    <div class="tab-content" id="adventure">
        <h1>Adventure</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dui tortor, eu fermentum libero condimentum hendrerit. 
            Duis efficitur faucibus varius. Suspendisse at turpis sit amet enim tincidunt tincidunt ac non urna. Praesent eget neque 
            gravida tellus lobortis aliqu.</p>
    </div>
    <div class="tab-content" id="habitats">
        <h1>Habitats</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dui tortor, eu fermentum libero condimentum hendrerit. 
            Duis efficitur faucibus varius. Suspendisse at turpis sit amet enim tincidunt tincidunt ac non urna. Praesent eget neque 
            gravida tellus lobortis aliqu.</p>
    </div>
    <div class="tab-content" id="gardening">
        <h1>Gardening</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dui tortor, eu fermentum libero condimentum hendrerit. 
            Duis efficitur faucibus varius. Suspendisse at turpis sit amet enim tincidunt tincidunt ac non urna. Praesent eget neque 
            gravida tellus lobortis aliqu.</p>
    </div>
    <div class="tab-content" id="fishing">
        <h1>Fishing</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dui tortor, eu fermentum libero condimentum hendrerit. 
            Duis efficitur faucibus varius. Suspendisse at turpis sit amet enim tincidunt tincidunt ac non urna. Praesent eget neque 
            gravida tellus lobortis aliqu.</p>
    </div>
</div>

<a href="#" class="change" data-content="breeding">Change content to breeding</a> | 
<a href="#" class="change" data-content="adventure">Change content to adventure</a> | 
<a href="#" class="change" data-content="habitats">Change content to habitats</a> | 
<a href="#" class="change" data-content="gardening">Change content to gardening</a> | 
<a href="#" class="change" data-content="fishing">Change content to fishing</a>

我的CSS：

.content {
    width: 100%;
    border: 1px solid #d2d2d2;
    position: relative;
    height: 150px;
}

    .content .tab-content {
        padding: 25px;
        box-sizing: border-box;
        opacity: 0;
        transition: opacity .25s ease-in-out;
        position: absolute;
        left: 0;
        height: 150px;
        overflow-y: scroll;
    }

        .content .active {
            opacity: 1;
        }

我的jQuery：

$('.change').on('click', function(e) {
    e.preventDefault();

    $('.tab-content').removeClass('active');

    $('#' + $(this).data('content')).addClass('active');
});

感谢您的帮助。

Answer 1

visibility是你的朋友：）

问题是，您的最后一个内容是在所有内容之上，因此接收所有鼠标事件，并明显阻止其下的所有其他内容。 opacity: 0并不意味着内容不再适合鼠标事件，它实际上仍然存在。

只需在visibility: hidden;规则中添加.content .tab-content一个规则，在visibility: inherit;旁边的.content .active规则中添加opacity，即可完成。

以下是您更新的 fiddle 。

<强> CSS：

.content {
    width: 100%;
    border: 1px solid #d2d2d2;
    position: relative;
    height: 150px;
}
.content .tab-content {
    padding: 25px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease-in-out;
    position: absolute;
    left: 0;
    height: 150px;
    overflow-y: scroll;
}
.content .active {
    opacity: 1;
    visibility: inherit;
}

CSS3过渡不能正确渲染溢出scoll

1 个答案: