몇 개의 링크를 확인했습니다. 나는 그것을 이해했지만 그것은 내 일이 아닙니다.
내 코드 스 니펫은 다음과 같습니다.
$('.Quiz').click(function(){
window.location=$(this).find('a').attr('href');
return false;
})
.Portfolio {
background-color: #ffffff;
width: 920px;
margin: 0 auto;
position: relative;
margin-top: 120px;
margin-bottom: 50px;
border-style: solid;
border-color: #dddddd;
border-width: 2px;
padding-left: 20px;
padding-right: 20px;
overflow: auto;
}
.port {
color: #4aaaa5;
border-style: solid;
border-color: #cccccc;
border-width: 2px;
border-left-style: hidden;
border-right-style: hidden;
border-top-style: hidden;
}
.container_img img{
float:left;
margin: 0 auto;
padding: 20px;
width: 230px;
height: 230px;
position: relative;
}
.container h1 {
float:left;
position:relative;
padding: 20px;
}
.Books{
clear:left;
}
.Books h1{
clear:left;
}
.Kernel{
clear: left;
}
.Kernel h1{
clear: left;
}
.clear {
clear: both;
}
.text_m h1{
position: absolute;
margin: 0 auto;
text-align: center;
color: white;
background: #4aaaa5;
opacity: 0.7;
width:210px;
margin-top: 200px;
padding-left: 20px;
margin-left: 20px;
}
.text_e h1{
display: inline-block;
position: relative;
text-align: center;
color: white;
background: #4aaaa5;
opacity: 0.7;
width:230px;
margin-top: 200px;
right: 250px;
}
.text_b h1{
position: absolute;
text-align: center;
color: white;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Portfolio">
<div class="port">
<h1> Portfolio </h1>
</div>
<div class="container_img">
<div class="Quiz">
<a href="https://madhumitha.github.io/Quiz/"></a>
<img src="assets/images/quiz.jpg" alt="Quiz">
<div class='text_m'>
<h1> Quiz Time </h1>
</div>
</div>
<div class="Weather">
<img src="assets/images/Weather.jpg" alt="Weather">
<div class='text_e'>
<h1 id='weather'> Weather </h1>
</div>
</div>
<div class="Books">
<img src="assets/images/space.jpg" alt="Space">
<div class='text_b'>
<h1> ISS-Tracker </h1>
</div>
</div>
<div class="Photography">
<img src="assets/images/Photography.jpg" alt="Photography">
<div class='text_p'>
<h1> Photography </h1>
</div>
</div>
<div class="Kernel">
<img src="assets/images/Kernel.jpg" alt="Kernel">
<div class='text_k'>
<h1> Kernel </h1>
</div>
</div>
<div class="clear"></div>
</div>
</div>
첫 번째 이미지를 클릭 할 수 있도록 div를 만들려고합니다. 나는 무엇이 잘못되었는지 알아낼 수 없습니까? 클릭 이벤트가 CSS에서 부동 및 지우기와 함께 작동하지 않습니까?
HTML5 에서는 태그 div
내부에 삽입하는 것이 완벽하게 유효합니다 a
.
<a href="https://madhumitha.github.io/Quiz/">
<div class="Quiz">
<img src="assets/images/quiz.jpg" alt="Quiz">
<div class='text_m'>
<h1> Quiz Time </h1>
</div>
</div>
</a>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다