HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์
Moderator: mindphp
-
Thanapoom1514
- PHP VIP Members
- โพสต์: 4329
- ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 »
สอบถามวิธีทำข้อความขึ้นมาแสดง
คือเวลาเอาเม้าไปชี้ที่รูปอยากให้ข้อความขึ้นแสดงโชว์ต้องทำยังไงบ้างครับ
โค้ด: เลือกทั้งหมด
<style>
.square {
width: 55px;
height: 50px;
border: solid 2px #726E6D;
transition: 0.5s;
display: flex;
}
.hide {
display: none;
}
.circle {
width: 100%;
height: 80%;
background-color: aquamarine;
border: solid 5px darkcyan;
border-radius: 100%;
transition: 0.5s;
margin-bottom: 3px;
}
.square:hover {
width: 75px;
height: 75px;
}
.circle:hover {
background-color: #34A56F;
border: solid 5px #306754;
}
</style>
<div class="hide">ข้อที่อยากแสดงโชว์</div>
<div class="square">
<div class="circle"></div>
</div>
-
flook
- PHP VIP Members
- โพสต์: 3751
- ลงทะเบียนเมื่อ: 06/06/2022 9:43 am
โพสต์ที่ยังไม่ได้อ่าน
โดย flook »
css
โค้ด: เลือกทั้งหมด
a.tip {
border-bottom: 1px dashed;
text-decoration: none
}
a.tip:hover {
cursor: help;
position: relative
}
a.tip span {
display: none
}
a.tip:hover span {
border: #c0c0c0 1px dotted;
padding: 5px 20px 5px 5px;
display: block;
z-index: 100;
background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
left: 0px;
margin: 10px;
width: 250px;
position: absolute;
top: 10px;
text-decoration: none
}
html
โค้ด: เลือกทั้งหมด
<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>
ที่มา https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag
หรือแบบ ใช้ title
โค้ด: เลือกทั้งหมด
<input type="text" title="ข้อความที่จะแสดง." placeholder="Enter text...">
<div title="ข้อความที่จะแสดง ">ทดสอบ</div>
<img title="ข้อความที่จะแสดง " />
ประมาณนี้ไหมครับ
-
Thanapoom1514
- PHP VIP Members
- โพสต์: 4329
- ลงทะเบียนเมื่อ: 04/07/2022 9:46 am
โพสต์ที่ยังไม่ได้อ่าน
โดย Thanapoom1514 »
ลองทำตาม ทำได้แล้วครับ
โค้ด: เลือกทั้งหมด
<style>
.page{
margin:50vh;
}
.circle {
width: 45px;
height: 45px;
background-color: aquamarine;
border: solid 5px darkcyan;
border-radius: 100%;
transition: 0.5s;
margin-bottom: 3px;
}
#square {
width: 55px;
height: 55px;
border: solid 2px #726E6D;
transition: 0.5s;
}
#square:hover {
width: 75px;
height: 75px;
cursor: help;
position: relative
}
.circle:hover {
width: 65px;
height: 65px;
}
.circle:hover .distance{
background-color: #fff;
border: solid 5px #82ffd3;
cursor: help;
position: relative;
border: #c0c0c0 1px dotted;
padding: 5px 20px 5px 5px;
display: block;
z-index: 100;
left: 10px;
margin: 10px;
width: 250px;
position: absolute;
top: -40px;
text-decoration: none;
}
.distance {
display: none;
font-size:14px;
}
</style>
<div class="page">
<div id="square">
<div class="circle"><span class="distance">ข้อความแสดงโชว์</span></div>
</div>
</div>
ผลลัพธ์ที่ได้
- ทำรูปวงกลมกับสี่เหลี่ยม.png (2.63 KiB) Viewed 736 times
- เมื่อเอาเม้าไปชี้จะแสดงข้อความขึ้นมา.png (6.66 KiB) Viewed 736 times
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 7