ボックス全体をリンクにするにはどうすればよいですか？

Question

ボックス全体をリンクにするにはどうすればよいですか？
ボックスの上にホバーをしたら、テキストのタイトルがオレンジになって、
このボックス内全体がどこを押してもリンクに飛ぶように設定したいのですが分かりませんでした。
よろしくお願いします。

<section class="guide2">
    <div class="guide2-cover">
      <div class="guide2-ttl">
        <img src="/img/yokuwakaru-guide-waku.png" alt="よく分かる代理店選びガイド">
      </div>
      <div class="guide2-text">
        <p>「<span>広告運用は初めて????</span>」という方はもちろん、「<span>WEBマーケティングで悩んでる????</span>」という方も、<br>
        あなたが関わる事業を伸ばすために、ぜひご活用ください。</p>
      </div>
      <!-- コンテンツボックス -->
      <div class="guide2-content">
        <div class="guide2-box"><!-- boxつ1目 -->
          <div>
            <img class="guide2-box-img" src="img/type.png">
          </div>
          <div class="guide2-box-txt">
            <div class="guide2-box-text-ttl">
              <h1><a href="#">代理店の選び方</a></h1>
            </div>
            <div class="guide2-box-text-dtl">
              <p>広告運用を代理店に任せるメリット・デメリット。<br>たった10分で選ぶポイントが身につきます。</p>
            </div>
          </div>
        </div>
        <div class="guide2-box"><!-- boxつ2目 -->
          <div>
            <img class="guide2-box-img" src="img/type.png">
          </div>
          <div class="guide2-box-txt">
            <div class="guide2-box-text-ttl">
              <h1><a href="#">広告の種類</a></h1>
            </div>
            <div class="guide2-box-text-dtl">
              <p>自社にあった広告の正しい選び方・探し方について。<br>理想のマーケティング手段を探しだすコツをご説明します。</p>
            </div>
          </div>
        </div>
        <div class="guide2-box"><!-- boxつ3目 -->
          <div>
            <img class="guide2-box-img" src="img/type.png">
          </div>
          <div class="guide2-box-txt">
            <div class="guide2-box-text-ttl">
              <h1><a href="#">マーケティング依頼の相場</a></h1>
            </div>
            <div class="guide2-box-text-dtl">
              <p>費用や料金の相場をわかりやすく解説。<br>初期費用や広告運用以外で必要な料金もこれで納得。</p>
            </div>
          </div>
        </div>
        <div class="guide2-box"><!-- boxつ4目 -->
          <div>
            <img class="guide2-box-img" src="img/type.png">
          </div>
          <div class="guide2-box-txt">
            <div class="guide2-box-text-ttl">
              <h1><a href="#">発注する際のポイント</a></h1>
            </div>
            <div class="guide2-box-text-dtl">
              <p>知らないと損をする！？<br>外部企業にマーケティング依頼をする時のポイントを、代理店目線で解説します。</p>
            </div>
          </div>
        </div>
        <div class="guide2-box"><!-- boxつ5目 -->
          <div>
            <img class="guide2-box-img" src="img/type.png">
          </div>
          <div class="guide2-box-txt">
            <div class="guide2-box-text-ttl">
              <h1><a href="#">商材・業界別事例集</a></h1>
            </div>
            <div class="guide2-box-text-dtl">
              <p>ケース別に具体的な成功・失敗事例をシェアします。<br>自社の状況と比較して参考にしてみてください。</p>
            </div>
          </div>
        </div>
        <div class="guide2-box"><!-- boxつ6目 -->
          <div>
            <img class="guide2-box-img" src="img/type.png">
          </div>
          <div class="guide2-box-txt">
            <div class="guide2-box-text-ttl">
              <h1><a href="#">悩み別ケーススタディ</a></h1>
            </div>
            <div class="guide2-box-text-dtl">
              <p>あなたは今、どんな悩みを抱えていますか？<br>マーケティングでよくある様々な悩みを解決します。</p>
            </div>
          </div>
        </div>
    </div>
  </section>

/* CSSのリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Roboto', sans-serif;
}
// よく分かるガイドテスト2
.guide2 {
  height: 800px;
  background-color:#FDECE6;
  
}
.guide2-content {
  max-width: 1140px;
  margin:0 auto;
}
.guide2-ttl {
  margin:0px auto;
  padding-top:20px;
  text-align: center;
}
.guide2-ttl img{
  width:500px;
}
.guide2-text {
  margin:0px auto;
  padding-top:8px;
  padding-bottom:20px;
  width:900px;
  img {
    width:13px;
  }
}
.guide2-text p{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.guide2-text span{
  color:red;
  background: linear-gradient(transparent 50%, #ffcc00 70%);
}
.guide2-cover {
  max-width:1140px;
  margin: 0 auto;
}
.guide2-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 20px;
  box-sizing: border-box;

}
.guide2-box {
  background-color: white;
  border-radius: 8px;
  width:46%;
  min-height: 125px;
  margin:10px;
  display: flex;
  padding: 5px;
  border-right: solid 18px #ffc06e;
  box-shadow:0 2px 4px rgba(0,0,0,.28);
  flex-shrink: 0;
}

.guide2-box-img {
  height: 120px;
}
.guide2-box-txt {
  margin:0 10px;
}
.guide2-box-text-ttl a{
  text-decoration: none;
  color: #0033cc;
  font-size:20px;
}

Answer 1

ボックス全体をリンクにするにはどうすればよいですか？

「ボックス全体」を囲う要素をdivではなくa要素にすればよいです。（ボックスの中のa要素は削除する）

Comments

[takawork]

ありがとうございます。ボックス全体をリンクにすることは出来ました。質問の続きですが
.guide2-content h1:hover{
text-decoration: none;
color:red;
}
とするとタイトルのボックスにホバーした時のみに、タイトルが赤くなってしまいます。
これをボックスのどこにホバーしても、タイトルが赤くなるようにするにはどうすれば良いですか？

[kei344]

ボックス全体:hove h1 {}

[takawork]

すみません、あとオレンジも同時に赤くなるようにするにはどうすれば良いですか？
.guide2-box :hover h1 {
color:red;
border-right: solid 18px red;
}
これだと変な部分に赤の帯が出てきてしまします。
同時に二つの要素を指定するときの記述がよくわからないです。
お手数ですがよろしくお願いします。

[takawork]

.guide2-box :hover {
border-right: solid 18px red;
}
これとかでも赤い部分が動くようになってしまいました。

[kei344]

質問内容が回等時とずれています。新たに質問されてはいかがでしょう。

[takawork]

了解しました、改めて質問させていただきますね。