html - css hover img not work on other class opacity

Question

Welcome To Ask or Share your Answers For Others

html - css hover img not work on other class opacity

asked Mar 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

I've this HTML file. I'm trying to implement :hover property so when I pass over .linux-face element the .info element set opacity to 0. I'm trying to get out of this for about 30 minutes. I've also try to map :hover to other class but nothing seems working.

<!DOCTYPE html>
<html>
    
    <head>
        <!-- Setup -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;700&display=swap" rel="stylesheet"> 
        <link rel="stylesheet" href="main.css" />
        <title> Linus Torvald aka Linux </title>
    </head>

    <body id="main">
        
        <section class="main-section">
            <div class="container">
                <h1 id="title" class="main-title"> Linus Torvald </h1>
                
                <div class="image-section" id="img-div">
                    
                    <img id ="image" class="linux-face" src="img/linus_torvald.jpg" alt="Linus Torvald smiling face :)">
                    <p id="img-caption">Linus Torvald smiling face :) </p>
                </div>
                
                <div class="info">
                    <p id="tribute-info"> <span class="linux_info"> Hello, World! </span> </p>
                </div>
             

            </div>
    </body>
</html>

That's my scss file:

#main {
    display: flex;
    justify-content: center;
}
.main-title {
    font-family: 'Josefin Sans', sans-serif;
}

.linux-face { 
    &:hover {
        .info{ 
            opacity:0;   
    }
}}

If I try something like

.linux-face:hover {
    opacity: 0;
}

the hover effect on .linux-face works fine. Also this work fine

.container:hover {
    .info {
        opacity: 0;
    }
}

question from:https://stackoverflow.com/questions/65841684/css-hover-img-not-work-on-other-class-opacity

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

287 views

1 Answer

深蓝 · Answer 1 · 2021-03-06T05:09:04+0000

.linux-face { 
    &:hover {
       .info { 
          opacity: 0;   
       }
    }
 }

gets compiled into

.linux-face:hover .info { opacity: 0; }

but .linux-face is an img element so you are actually targeting a nested element inside the image which clearly doesn't exist —

if your goal is to change the opacity of the .info element when you hover the image then you can't simply do it with the given markup: the most you could do is .image-section:hover + .info { opacity: 0 } so it will work if you hover either the image or the caption paragraph.

As a side note you could use a more meaningful and semantic markup

<figure>
   <img src="img/linus_torvald.jpg" alt="Linus Torvald smiling face" />
   <figcaption>Linus Torvald smiling face</figcaption>
</figure>

Categories

html - css hover img not work on other class opacity

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags