CODEWITHSUNDEEP
htmlcss
Pierre Anken
Pierre Anken

Reputation: 336

Link on a DIV but not on content

I set a link on a <div> but all the elements of the <div>become also links. Any clue how I could remove the formatting from the children?

enter image description here

The bottom <div> is on rollover mode.

div.hotel-preview {
  border-style: solid;
  padding: 0px 10px 10px 10px;
  margin-bottom: 20px;
}

div.hotel-preview:hover {
  background-color: aliceblue;
}
<a href="@Url.Action("Hotel", "Home", new { id = hotel.IdHotel})">
  <div class="hotel-preview">
    ...
  </div>
</a>

Upvotes: 0

Views: 56

Answers (2)

PatDuJour
PatDuJour

Reputation: 975

I'm assuming you want to remove the underlines for the hyperlinks, you can just add text-decoration: none; to your tag

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    div.hotel-preview {
      border-style: solid;
      padding: 0px 10px 10px 10px;
      margin-bottom:20px;
    }

    div.hotel-preview:hover {
      background-color: aliceblue;
    }
    
    .href-wrapper {
      text-decoration: none;
    }
  </style>
</head>
<body>

  <a class="href-wrapper" href="/">
     <div class="hotel-preview">
       <h1>Matterhorn</h1>
       
       <p>Lieu: Brig</p>
       <h4>Contact</h4>
       <p>+41279220001</p>
       <p>[email protected]</p>
     </div>
  </a>
  
</body>
</html>

Upvotes: 2

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Give text-decoration: none to <a>, like:

a {
  text-decoration: none;
}

Have a look at the snippet below:

div.hotel-preview {
  border-style: solid;
  padding: 0px 10px 10px 10px;
  margin-bottom: 20px;
}

div.hotel-preview:hover {
  background-color: aliceblue;
}

a {
  text-decoration: none;
}
<a href="@Url.Action("Hotel", "Home", new { id = hotel.IdHotel})">
  <div class="hotel-preview">
    ...
  </div>
</a>

Hope this helps!

Upvotes: 1

Related Questions