Div link not redirecting to page-CodePudding

im trying to make a main page for my github account. i found a way to make a div clickable, so im using them as buttons with images and text. However, this specific one (directed to callmeclover.github.io/school.html) will not redirect. Here is my code on the main page (callmeclover.github.io no need to go, but you can.):

.default-link {
  /* all rules required to make the whole div clickable */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  /* this is a fix for IE7-9 */
  background-color: #ffffff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

.panelsbsc {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  width: 325px;
  height: 200px;
  position: relative;
  bottom: 100px;
  text-align: center;
  background-color: rgb(39 50 38);
  border-radius: 1em;
}

<div  style="position:relative;bottom:405px;left:670px;">
  <h2>School</h2>
  <p>Stuff I do for school.</p>
  <a  href="javascript:void(0)" onclick="window.location = 'callmeclover.github.io/school.html';"></a>
</div>

CodePudding user response：

You can put the onlick event on your div, so all your elements inside your div will be clickable.

This spinnet is working

<div onclick="window.location = 'callmeclover.github.io/school.html';">
  <h2>School</h2>
  <p>Stuff I do for school.</p>
</div>

CodePudding user response：

Your code will only work only clicking on that particular <a> (basically acts same as if you put url inside href).

What you want to do is move JS code into <div>. Also you do not need link on it, since you can just set cursor: pointer on .panelsbsc to have mouse change into clickable pointer

.default-link {
  /* all rules required to make the whole div clickable */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  /* this is a fix for IE7-9 */
  background-color: #ffffff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

.panelsbsc {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  width: 325px;
  height: 200px;
  position: relative;
  bottom: 100px;
  text-align: center;
  background-color: rgb(39 50 38);
  border-radius: 1em;
}

<div  onclick="window.location = 'callmeclover.github.io/school.html';">
  <h2>School</h2>
  <p>Stuff I do for school.</p>
</div>