Question

好的，我知道这个基本问题已被提出（之前我已经这样做了），但这是不同的。

好的，你看到所有东西在移动吗？它位于<section> ...

<div id="main">
            <a href="1/cover.html"><img src="images/ch1.jpg" alt="" id="ch1" /></a>
            <a href="tango/1.html"><img src="images/tango.jpg" alt="" id="tango"/></a>
            <section>
               <img src="images/pngs/loka.png" alt="" id="loka" />
               <img src="images/pngs/blood.png" alt="" id="blood" />
               <img src="images/pngs/smoke.png" alt="" id="smoke" />
               <img src="images/pngs/stalk.png" alt="" id="stalk" />
            </section>

具有以下风格......

#loka, #blood, #smoke, #stalk {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}
#main {
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 100vh;   
}

通过一些动画，你知道这是怎么回事。

我希望当一个人盘旋在＆＃34;第1章＆＃34; <a>的图像（第1 <section>）仅在此时出现，否则保持不可见。看起来<section>中的png覆盖在所有内容之上。

好的，所以我使用z-index：-1。图像消失了。我使第1章缩略图绝对然后我尝试，我仍然失败。你能救我一下吗？

Answer 1

基于你的html结构的非常具体的css答案：

section {display:none;}

#main a:first-child:hover ~ section {
display:block;
}

heres a fiddle demonstrating it. (i didnt bother to give your images a proper src)

~是sibling selector，它没有得到足够的爱：）

Answer 2

Here you go.

a {
    padding:5px;
    position: relative;
    z-index: 1;
}
section {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 1200ms;
}
a:first-child:hover ~ section {opacity: 1;}

重要部分：确保链接的z-index高于部分的z-index。

但是，我花了很多时间和自由来彻底改进你的代码。特别是关注您的页面和SEO的扩展。

Here it is.

改进搜索引擎优化：使用包含正确文本值和链接的列表
对于屏幕阅读器：具有正确文字的链接
更漂亮的淡入和动画（在我看来。这是非常主观，你应该适应你喜欢的！）
更好的结构化CSS（虽然我在小提琴中使用了SCSS）

Answer 3

将<{1}}添加到您的部分，例如

display:none

我看到当你将鼠标悬停在第一个a上时，你会向身体添加一个section { display: none; }类，这很好。只需将其添加到您的CSS：

chapter1

它应该有用。

使用CSS或jQ，我如何显示此部分元素：悬停？

3 个答案: