Clever Geek Handbook

Using CSS or jQ, how can I show this section element on: hover?

Ok, I know this basic question has been asked (and I've done it before), but that's different.

http://matiny.tk/warframe/mission.html

Okay, can you see it all moving? He is in <section>

this ...

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

With the following style ...

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

And with some animations, you know how it goes.

I want when a person hovers over the image "Chapter 1" (1st <a>

) in <section>

order to appear only then, and remain invisible otherwise. It looks like the pngs are <section>

overlaid on top of everything.

Ok, so I am using z-index: -1. The images disappear. I make the chapter 1 thumbnail absolute and I try then and I still fail. Can you help me?

+3


source to share


3 answers


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

Important parts: Make sure the z-index of the links is higher than the section.



However, I have taken the time and freedom to improve your code. Especially considering your page extension and SEO.

Here he is.

  • SEO Improvement: Using a List with Appropriate Text Values ​​and Links
  • For scroller: links with relevant text
  • Prettier fade in and animation (in my opinion. This is very subjective and you have to adapt to what you like!)
  • Better structured CSS (I used SCSS in fiddle)
+1


source


a very specific css answer based on your html structure:

section {display:none;}

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


heres a fiddle demonstrating this. (i didn't bother giving your images the correct src)

the ~

is a sibling selector not getting enough love :)

+1


source


Add display:none

to your section like

section {
 display: none;
}

And I see that when you hover over the first a, you add a class to the body chapter1

, which is good. Just add this to your css:

.chapter1 section {
 display: block !important;
}

And it should work.

0


source






More articles:


All Articles