Make entire div act as a link except one div which also has another link

Question

I have product layout page. Products will be displayed on this page, along with a picture, person's name, title, and description. However, all of those image, title, and description will have the same link, while the person name will have a separate link.

The problem is when i add "href" to the whole div, it also cover the person name and it work as the single link.

How can i make it cover for the whole product card with one link and, only person name for the another link.

By inspecting the first and second product cards, you may execute the code and locate my current problem.

.person {
  position: relative;
  top: 5px;
  left: 10px;
  color: #000000;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: -20px;
}

.well {
  background: transparent;
  border-style: none;
}

.item {
  width: 250px !important;
  padding: 0;
  margin-top: 50px;
  margin: 19px;
  box-shadow: 1px 5px 15px #CCC;
}

.col-md-3:hover {
  box-shadow: 1px 5px 25px #ccc;
}

.thumbnail {
  margin-bottom: 0px;
  padding: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.p-title {
  margin-top: 10px;
  font-weight: bolder;
  font-family: "Arial";
  font-size: 16px;
}

.lead {
  position: relative;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: 25px;
}

.img-id {
  object-fit: cover !important;
  object-position: center;
  height: 250px !important;
  width: 100% !important;
}

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<!-- partial:index.partial.html -->
<div class="container">
  <div class="well well-sm">
    <div id="view" class="btn-group">
    </div>

    <div id="products" class="row list-group">

      <!-- Single product -->
      <a href="https://www.youtube.com/">
        <div class="item  col-xs-4 col-md-3">
          <div class="thumbnail">
            <img class="img-id" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
            <a href="https://www.linkedin.com/">
              <div class="person">
                <p class="person-name">Person Name</p>
              </div>
            </a>
            <div class="caption">
              <p class="p-title">
                Old used box</p>
              <div class="row">
                <div class="col-xs-12 col-md-6">
                  <p class="lead">
                    Description</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a>
      <!-- end Single product -->
      <a href="https://www.youtube.com/">
        <div class="item  col-xs-4 col-md-3">
          <div class="thumbnail">
            <img class="img-id" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
            <div class="person">
              <p class="person-name">Person Name</p>
            </div>
            <div class="caption">
              <p class="p-title">
                Old used box</p>
              <div class="row">
                <div class="col-xs-12 col-md-6">
                  <p class="lead">
                    Description</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img-id" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
          <div class="person">
            <p class="person-name">Person Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item  col-xs-4 col-md-3">
        <div class="thumbnail">
          <img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
          <div class="person">
            <p class="person-name">Person Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box</p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- partial:index.partial.html -->

`event.stopPropagation()` https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation — epascarello, Oct 15 '21 at 17:28
possible duplicate https://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute among others — G-Cyrillus, Oct 15 '21 at 17:29
@epascarello i tried to use event.stopPropagation() but it dones't work for me. How can i do it? Pls help me out. I would really appreciate your help. — Fifo, Oct 15 '21 at 18:37

score 0 · Answer 1 · answered Oct 15 '21 at 17:54

Please check the second card which I updated

It's not a good practice to wrap a div with a tag since div is a block element though it will work. So you can simply add a onclick event to direct to a link and add a cursor pointer styling to let your audience is aware of the link and then wrap the

name tag with an tag with another link.

.person {
  position: relative;
  top: 5px;
  left: 10px;
  color: #000000;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: -20px;
}

.well {
  background: transparent;
  border-style: none;
}

.item {
  width: 250px !important;
  padding: 0;
  margin-top: 50px;
  margin: 19px;
  box-shadow: 1px 5px 15px #ccc;
}

.col-md-3:hover {
  box-shadow: 1px 5px 25px #ccc;
}

.thumbnail {
  margin-bottom: 0px;
  padding: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.p-title {
  margin-top: 10px;
  font-weight: bolder;
  font-family: "Arial";
  font-size: 16px;
}

.lead {
  position: relative;
  font-family: "Arial";
  font-size: 15px;
  margin-bottom: 25px;
}

.img-id {
  object-fit: cover !important;
  object-position: center;
  height: 250px !important;
  width: 100% !important;
}

#card-2 {
  cursor: pointer;
}

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/><link rel="stylesheet" href="./style.css" />
<!-- partial:index.partial.html -->
<div class="container">
  <div class="well well-sm">
    <div id="view" class="btn-group"></div>

    <div id="products" class="row list-group">
      <!-- Single product -->
      <a href="https://www.youtube.com/">
        <div class="item col-xs-4 col-md-3">
          <div class="thumbnail">
            <img
              class="img-id"
              src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"
              alt=""
            />
            <a href="https://www.linkedin.com/">
              <div class="person">
                <p class="person-name">Person Name</p>
              </div>
            </a>
            <div class="caption">
              <p class="p-title">
                Old used box
              </p>
              <div class="row">
                <div class="col-xs-12 col-md-6">
                  <p class="lead">
                    Description
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a>
      <!-- end Single product -->
      <div
        id="card-2"
        class="item col-xs-4 col-md-3"
        onclick="window.location='https://www.youtube.com'"
      >
        <div class="thumbnail">
          <img
            class="img-id"
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg"
            alt=""
          />
          <div class="person">
            <a href="https://www.linkedin.com/">
              <p class="person-name">Person Name</p>
            </a>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box
            </p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="item col-xs-4 col-md-3">
        <div class="thumbnail">
          <img
            class="img-id"
            src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80"
            alt=""
          />
          <div class="person">
            <p class="person-name">Person Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box
            </p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item col-xs-4 col-md-3">
        <div class="thumbnail">
          <img
            class="img-id"
            src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png"
            alt=""
          />
          <div class="person">
            <p class="person-name">Person Name</p>
          </div>
          <div class="caption">
            <p class="p-title">
              Old used box
            </p>
            <div class="row">
              <div class="col-xs-12 col-md-6">
                <p class="lead">
                  Description
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- partial:index.partial.html -->
    </div>
  </div>
</div>

Make entire div act as a link except one div which also has another link

1 Answers1