ตามโค้ดด้านล้างนี้ มี 3 ไฟล์ html , css , javascript
ในส่วน css ผมใช้ ้hover ชี้เพื่อ zoom ทำงานได้ปกติ
พอคลิกใน javascript ผมใช้ onclick เพื่อ zoom ทำงานได้ปกติ
แต่พอกลับเอาเมาส์ไปชี้ในรูปภาพเดิม css: hover ไม่ทำงานเลย
ผมใช้ภาพเดียวกัน ที่ใช้ zoom ภาพ css และ javascript
ผมพึ่งเริ่มศึกษานะคับ เลยอยากรู้มันเป็นเพราะอะไร
แล้วมีวีธีแก้ไหมคับ
1, HTML //------------------------------------------------
<body>
<img id="pk" src="image/A1.jpg" onclick = "zoom()">
<link rel="stylesheet" href="Main.css">
<script src="Main.js" ></script>
</body>
2, CSS //------------------------------------------------
#pk{
background-color: orange;
height:200px;
width:200px;
left: 1%;
top: 1%;
}
#pk:hover{
height:300px;
width:300px;
transition: width 0.5s, height 0.5s;
}
3, javascript //------------------------------------------------
async function zoom() {
img=document.getElementById("pk");
this.W = img.width;
this.H = img.height;
img.style.width = (500)+"px";
img.style.height = (500)+"px";
img.style.transition = "width 0.5s , height 0.5s";
}
ทำไม css ไม่ทำงานคับ
ในส่วน css ผมใช้ ้hover ชี้เพื่อ zoom ทำงานได้ปกติ
พอคลิกใน javascript ผมใช้ onclick เพื่อ zoom ทำงานได้ปกติ
แต่พอกลับเอาเมาส์ไปชี้ในรูปภาพเดิม css: hover ไม่ทำงานเลย
ผมใช้ภาพเดียวกัน ที่ใช้ zoom ภาพ css และ javascript
ผมพึ่งเริ่มศึกษานะคับ เลยอยากรู้มันเป็นเพราะอะไร
แล้วมีวีธีแก้ไหมคับ
1, HTML //------------------------------------------------
<body>
<img id="pk" src="image/A1.jpg" onclick = "zoom()">
<link rel="stylesheet" href="Main.css">
<script src="Main.js" ></script>
</body>
2, CSS //------------------------------------------------
#pk{
background-color: orange;
height:200px;
width:200px;
left: 1%;
top: 1%;
}
#pk:hover{
height:300px;
width:300px;
transition: width 0.5s, height 0.5s;
}
3, javascript //------------------------------------------------
async function zoom() {
img=document.getElementById("pk");
this.W = img.width;
this.H = img.height;
img.style.width = (500)+"px";
img.style.height = (500)+"px";
img.style.transition = "width 0.5s , height 0.5s";
}