Ukrywanie jednego obiektu podczas najazdu myszką na inny

0
<header id="masthead">
    <nav id="site-navigation">
        <div class="wrapper">
            <section class="navigation">               
                <h2></h2>
				<div class="menu-looking-for-a-quick-start-container">
					<ul id="menu-looking-for-a-quick-start" class="menu">
					<li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-172"><a href="http://a.php">"Leśno Rajza"</a></li>
					<li id="menu-item-173" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-173"><a href="http://b.php">Warmia i Mazury</a></li>
					<li id="menu-item-174" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-174"><a href="http://c.php">Ojców</a></li>
					<li id="menu-item-175" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-175"><a href="http://d.php">Rudy Raciborskie</a></li>
					<li id="menu-item-176" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-176"><a href="http://e.php">Gliwice</a></li>
				
			</ul></div>            </section>
        </div>
    </nav>
</header>

<div class="site-title">
ABC		
</div>

Chcę aby po najeździe na link a href lub jakiś element li znikał div site-title

Niestety działa mi tylko jak dam (ale to działa gdy najazd myszką na dowolne miejsce ekranu):

          #masthead:hover ~ .site-title{
display=none;
}

Natomiast to już nie:

	  #site-navigation a:hover ~ .site-title {	
display=none;
    }

Nacodzień nie kodzę w css/js a ponadto to kod innej osoby po której przejąłem część kodu.

1

Jak możesz użyć jQuery to powinno rozwiązać problem:

<script type="text/javascript">
    $(function() {
        $('#masthead li a').hover(function() { $('.site-title').hide(); }, function() { $('.site-title').show(); });
    });
</script>
0

Działa thx

1 użytkowników online, w tym zalogowanych: 0, gości: 1