<section class="contentBody">
  <button type="button" class="menu" data-button="menu">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-menu" aria-label="メニュー"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8l16 0" /><path d="M4 16l16 0" /></svg>
    <span class="menu__text">メニュー</span>
  </button>
</section>
<section class="contentBody">
  <p class="result" data-view="result"></p>
</section>
body{
  margin: 0;
  padding: 0;
}
.contentBody{
  padding: 20px;
}
.menu{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  color: #fff;
  border-radius: 100%;
  width: 60px;
  height: 60px;
}
.menu__text{
  display: none;
}

.result{
  padding: 5px;
  background: #eee;
  border: #ccc 1px solid;
  border-radius: 8px;
  min-height: 1.5rem;
}
// data-buttonを取得
const menuButton = document.querySelector('[data-button="menu"]');
// data-viewを取得
const resultView = document.querySelector('[data-view="result"]');

// クリックイベントを設定
menuButton.addEventListener('click', () => {
  // メニューがクリックされたら、結果を表示
  resultView.textContent = 'メニューがクリックされました';
});

// hoverイベントを設定
menuButton.addEventListener('mouseover', () => {
  // マウスが乗ったら、テキストを表示
  resultView.textContent = 'メニューにマウスが乗りました';
});
// マウスが外れたら、テキストを非表示
menuButton.addEventListener('mouseout', () => {
  resultView.textContent = '';
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.