下記のサイトを参考にして、`<div class="header">`にhoverした際、`<div
id="pankuzu">`が非表示になるように設定したのですが、全く反応しませんでした。

何が原因か、ご教示いただけますでしょうか。

参考にしたサイト：  
[show, hide
(マウスオーバーで表示・非表示を切り替える)](http://yurubu.org/jquery%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89-02-show-
hide/293/)

**HTML**

```

    <header>
        <div class="header">ヘッダー内容</div>
        <div id="pankuzu">
            <ul>
                <li>パンくずの内容</li>
                <li>パンくずの内容</li>
                <li>パンくずの内容</li>
           </ul>
        </div>
    </header>
    
```

**HEAD内のscript記述**

```

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $('.header').mouseenter(function(){
            $('#pankuzu').hide();
        }).mouseleave(function(){
            $('#pankuzu').show();
        });
    </script>
    
```
CC BY-SA 3.0
2018-03-27T06:38:35.633
42669
2018-03-27T07:00:50.050
2018-03-27T07:00:50.050
3060
27902
question
javascript
.headerにhoverした際、#pankuzuを非表示にしたい