Make whole div clickable

Question

I'm having a bit of trouble making the whole div clickable. Right now I have an image and when you hover over it another div slides up with information. I want to make that whole div clickable. Check the JsFiddle for example

Here is what I have so far:

//html

<div class="col-sm-4 peaceful">
    <div class="pre-inner">
        <img src="http://lorempixel.com/304/188/">
            <a href="http://www.google.com">
                <div class="pre-info">
                    <h4>See our activity philosophy</h4>
                    <a class="btn btn-success" href="http://www.google.com">Click Here </a>
                </div>
            </a>
    </div>
</div>

//css

.pre-inner {
    position: relative;
    max-width: 300px;
    overflow: hidden;
    margin: 0px auto 0px;
}

.pre-info {
   position: absolute;
   padding-top: 10px;
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 20px;
   bottom: -187px;
   transition: all 0.5s ease;
   background-color: rgba(57, 68, 97, 0.65);
   left: 0;
   right: 0;
}

.pre-inner:hover .pre-info {
   background-color: rgba(57, 68, 97, 0.65);
   bottom: 0; 
   height: 100%;
   width: 100%;
   color: #fff; 

}

I tried moving the a tag around but that didn't work, also tried giving it a fixed height and width.

I already created a JsFiddle: http://jsfiddle.net/52VtD/13932/

By clickable do you mean for the link you provided? eg, click anywhere and go to where the link says? — Aravona, Jan 19 '16 at 15:17
Your HTML is invalid – you can not nest `a` elements into each other. If you want the whole `div` to link somewhere – then you should simply replace that `div` with `a` (and remove any links left inside it), which is perfectly legal in HTML5. — CBroe, Jan 19 '16 at 15:18
Possible duplicate of [How do I make entire div a link?](http://stackoverflow.com/questions/9228730/how-do-i-make-entire-div-a-link) — AGE, Jan 19 '16 at 15:32

score 5 · Accepted Answer · edited May 23 '17 at 12:16

The nested <a> is unnecessary, you can either strip it out completely or, if you wish to keep the mouse over button in the pop up div convert it to a <span>

 <div class="col-sm-4 peaceful">
     <div class="pre-inner">
         <img src="http://lorempixel.com/304/188/">
             <a href="http://www.google.com">
                 <div class="pre-info">
                     <h4>See our activity philosophy</h4>
                     <span class="btn btn-success">Click Here </span>
                 </div>
             </a>
     </div> </div>

For further information on why nested <a> tags might act like this considering reading the answer to the following stack overflow question Why are nested anchor tags illegal?

score 2 · Answer 2 · answered Jan 19 '16 at 15:23

You can increase size of <a> with a pseudo, so the whole boxe is covered with the link: http://jsfiddle.net/52VtD/13936/

.peaceful {
  overflow:hidden;
  position:relative;
}
.peaceful a:before {
  content:'';
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;

}

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.pre-inner {
  position: relative;
  max-width: 300px;
  overflow: hidden;
  margin: 0px auto 0px;
}

.pre-info {
  position: absolute;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  bottom: -187px;
  transition: all 0.5s ease;
  background-color: rgba(57, 68, 97, 0.65);
  left: 0;
  right: 0;
}

.pre-inner:hover .pre-info {
  background-color: rgba(57, 68, 97, 0.65);
  bottom: 0;
  height: 100%;
  width: 100%;
  color: #fff;
}

.peaceful {
  overflow:hidden;
  position:relative;
}
.peaceful a:before {
  content:'';
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

<div class="col-sm-4 peaceful">
  <div class="pre-inner">
    <img src="http://lorempixel.com/304/188/">
    <a href="http://www.google.com">
      <div class="pre-info">
        <h4>See our activity philosophy</h4>
        <a class="btn btn-success" href="http://www.google.com">Click Here </a>
      </div>
    </a>
  </div>
</div>

<div class="col-sm-4 peaceful">
  <div class="pre-inner">
    <img src="http://lorempixel.com/304/188/">
    <a href="http://www.google.com">
      <div class="pre-info">
        <h4>See our activity philosophy</h4>
        <a class="btn btn-success" href="http://www.google.com">Click Here </a>
      </div>
    </a>
  </div>
</div>

<div class="col-sm-4 peaceful">
  <div class="pre-inner">
    <img src="http://lorempixel.com/304/188/">
    <a href="http://www.google.com">
      <div class="pre-info">
        <h4>See our activity philosophy</h4>
        <a class="btn btn-success" href="http://www.google.com">Click Here </a>
      </div>
    </a>
  </div>
</div>

Daan · Answer 3 · 2016-01-19T15:41:03.233

Change the <a> element containing the text "Click here" to a <p> element. It's not valid to nest <a> tags because you only wrap the <a> tag around what has to link.

So in your case you don't want the text "Click here" to link, but the div around that. Wrap the <a> around that div, and not around only the text "Click here".

<div class="col-sm-4 peaceful">
    <div class="pre-inner">
        <img src="http://lorempixel.com/304/188/">
            <a href="http://www.google.com">
                <div class="pre-info">
                    <h4>See our activity philosophy</h4>
                    <p class="btn btn-success">Click Here </p>
                </div>
            </a>
    </div>
</div>

JSFiddle demo

Also I'd recommend you to use the W3 Validator to see whether or not your HTML is valid.

In this case it says:

Error: Start tag <a> seen but an element of the same type was already open.

As shown in the image below:

score 0 · Answer 4 · answered Jan 19 '16 at 15:20

0

Why don't you just add an onclick to the whole div:

<div class="col-sm-4 peaceful" onclick="alert('hello')">

I checked this in your fiddle, and it seems to behave like you wanted. Except that all this does is alert "hello".

answered Jan 19 '16 at 15:20

durbnpoisn

4,666
2
16
30

score 0 · Answer 5 · edited Jan 19 '16 at 16:13

0

You can use JS for it, the onclick function, or wrap your div with <a></a>

like this http://jsfiddle.net/52VtD/13935/

edited Jan 19 '16 at 16:13

Aravona

528
6
21

answered Jan 19 '16 at 15:22

Sirlero

71
3

AGE · Answer 6 · 2016-01-19T15:30:09.090

You are currently making .pre-info clickable by wrapping it within an anchor tag, remove the anchor from your Click Here and replace it with a <p> element to maintain the same style.

<div class="col-sm-4 peaceful">
  <div class="pre-inner">
    <img src="http://lorempixel.com/304/188/">
    <a href="http://www.google.com">
      <div class="pre-info">
        <h4>See our activity philosophy</h4>
        <p>
          Click Here
        </p>
      </div>
    </a>
  </div>
</div>

However, the below will result in a better implementation. Make the entire .peaceful element clickable by wrapping it in an anchor tag.

Just make sure to put display: block on your anchor tag, so that it behaves and styles well to whatever custom styling you wish to do upon it. For that reason I added the class .wrapper-anchor to the outer anchor tag:

.pre-inner {
    position: relative;
    max-width: 300px;
    overflow: hidden;
    margin: 0px auto 0px;
}

.pre-info {
   position: absolute;
   padding-top: 10px;
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 20px;
   bottom: -187px;
   transition: all 0.5s ease;
   background-color: rgba(57, 68, 97, 0.65);
   left: 0;
   right: 0;
}

.pre-inner:hover .pre-info {
   background-color: rgba(57, 68, 97, 0.65);
   bottom: 0; 
   height: 100%;
   width: 100%;
   color: #fff;
}

.wrapper-anchor {
    display: block;
}

<a class="wrapper-anchor" href="http://www.google.com">
  <div class="col-sm-4 peaceful">
    <div class="pre-inner">
      <img src="http://lorempixel.com/304/188/">
      <div class="pre-info">
        <h4>See our activity philosophy</h4>
        <p>
          Click Here
        </p>
      </div>
    </div>
  </div>
</a>

Make whole div clickable

6 Answers6