jQuery＆secton没有隐藏我的徽标div ID

Question

I'm trying to hide my logo only on one div and show it on another. In one of my sections, I have a video so I do not need to show my logo. I cant however do it at all. It either just hides forever or just does not want to hide at all.

I have tried both style="" inside the div and jquery. None of which works.

My HTML structure:

<!-- HEADER -->
<header id="header" class="header-left">        
    <div class="header-inner clearfix">

        <!-- LOGO -->
        <div id="logo" class="logo-left">
            <a href="index.html">
                     <img id="dark-logo" src="files/uploads/logo_dark.png" srcset="files/uploads/logo_dark.png 1x, files/uploads/logo_dark@2x.png 2x" alt="Logo Dark">
                     <img id="light-logo" src="files/uploads/logo_light.png" srcset="files/uploads/logo_light@2x.png 1x, files/uploads/logo_light@2x.png 2x" alt="Logo Light">
            </a>
        </div>

        <!-- MAIN NAVIGATION -->
        <div id="menu" class="clearfix">            

            <div class="menu-actions">
                <div class="menu-toggle"><span class="hamburger"></span></div>
            </div> <!-- END .menu-actions -->

            <div id="menu-inner">
                <nav id="main-nav">
                    <ul>
                        <li><a href="index.html">xxx</a>
                        </li>
                        <li><a href="#">xxx</a>
                        <ul class="sub-menu">
                        <li><a href="xxx.html">xxx</a></li>
                        <li><a href="xxx.html">xxxx</a></li>
                        <li><a href="xxx.html">xxx</a></li>
                        </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
     </div>
    <span class="pseudo-close header-close"></span>
</header>

Ok so before I show the source, here is what works :

 <style>#logo img{opacity:0;visibility:hidden;}</style>

Pretty standard right? So I tried hiding the logo in this same way into a section and it did not work . Example:

<section id="page-body" class="fullwidth-section text-dark" style="#logo img{opacity:0;visibility:hidden;}">

....

</section>

I then tried jQuery to hide the logo as a test. This did not work at all. Example:

<script src="files/js/jquery-1.12.4.min.js"></script>

<script>

$(document).ready(function(){


$("#logo").css({
display: "none",
visibility: "hidden"
});

$("#logo").hide();

</script>

What I was hoping to do is hide the logo in a single div then show it for the rest of the page. I had an idea to do this with jQuery or a section. Anyone have any ideas on how to do this?

Answer 1

style="#logo img{opacity:0;visibility:hidden;}"

This is not a valid HTML style attribute. It's a selector for CSS that should be nested under the HTML's <style> tag.

When setting an element's style attribute, you only need to write the style properties. This is how it should look:

style="opacity:0;visibility:hidden;"

Your jQuery attempt to hide the logo should work when you remove the logo element's style tag. Doing $('#logo').hide(); should work and is enough.

A few notes:

1. Using opacity:0; with visibility:hidden; doesn't make sense. Use either one of them, both make the element invisible.
2. You can just write $('#logo').hide(); , no need to the whole $("#logo").css({ section.
3. You can shorthand $(document).ready(function(){ to just $(function() {
4. Keep in mind using visibility:hidden; keeps the element inline the page, but invisible. If you want to make it disappear completely, use display:none;

Answer 2

You can't write inline style to another element.Inline styles are applicable to the element itself.

This is the right way

<style>#logo img{opacity:0;visibility:hidden;}</style>

This is not possible

<section id="page-body" class="fullwidth-section text-dark" style="#logo img{opacity:0;visibility:hidden;}">

....

</section>

Try

section #logo img{opacity:0;visibility:hidden;}