استفاده از hover
ثبت پرسش جدید
پاسخ‌ها
9
یک راه کلی اینه که، به کمک مروگر و ابزار inspect (بررسی کردن) سعی کنید کدهای مورد نظر رو تحلیل کنید.
نکته بعدی اینه که عنصر درونی در واقع از ابتدا موجود است، ولی چون مقدار تیرگی (opacity) در ابتدا صفر هستش دیده نمیشه. زمانی که اشاره گر به روی عنصر اصلی میره، این عنصر درونی تغییر تیرگی (opacity) به یک میده و برملا میشه.
البته در طرح های مختلف ممکنه تفاوت هایی در کدها وجود داشته باشه. بهتره مثال مدنظرتون رو قرار بدین.
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
@milad
اینکار رو چندین بار انجام دادم ولی به نتیجه ای نرسیدم
یه ترفندی که به ذهنم رسید این بود که درون المنت چیز هایی که میخوام رو میزارم و بعد d-none میکنم
و بعد توی css میگم که اگه هاور شد d-block بشه
ولی این جواب نداد متاسفانه
راهکاری که ارائه دادم صحیح هستش، ولی از نحوه پیاده سازی شما خبر ندارم.
کدهاتون رو قرار بدین تا بررسی بشه کرد.
@milad
به این نمونه دقت کنید
https://templatemo.com/live/templatemo_400_polygon
اگه روی عکس ها هاور بشه دکمه ای ظاهر میشه
درسته، اینجا به جای خصوصیت opacity از خصوصیت نمایش display استفاده شده.
حالا گیر شما کجاست؟
این که مشکلی نداره. متوجه گیر شما نشدم. کدهاتون رو چرا نمی ذارید؟
کد های html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template</title>
<link rel="stylesheet" href="https://roocket.ir/./Style/Css/bootstrap.min.css">
<link rel="stylesheet" href="https://roocket.ir/./Style/Css/font.css">
<link rel="stylesheet" href="https://roocket.ir/./Style/Css/Style.css">
<link rel="stylesheet" href="https://roocket.ir/./Style/Font Awaesome/all.css">
<script src="./Style/Js/jqury.js"></script>
<script src="./Style/Js/poper.js"></script>
<script src="./Style/Js/bootstrap.min.js"></script>
</head>
<body class="back">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="logo">
<img src="./Style/Css/Image/templatemo_logo.jpg" class="mt-4c ml-5c">
</div>
</div>
<div class="col-6">
<ul class="list-unstyled d-flex">
<li class="size">
<a href="#" >
<svg class="activee" width="2.5em" height="2.5em" viewBox="0 0 16 16" class="bi bi-camera-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 8.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
<path fill-rule="evenodd" d="M2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2zm.5 2a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm9 2.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z"/>
</svg>
<br>
<span class="text">
Gallery
</span>
</a>
</li>
<li class="size">
<a href="#" >
<svg class="text-white activeee" width="2.5em" height="2.5em" viewBox="0 0 16 16" class="bi bi-command" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3.5 2a1.5 1.5 0 1 0 0 3H5V3.5A1.5 1.5 0 0 0 3.5 2zM6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5H6zm4 1H6v4h4V6zm1-1h1.5A1.5 1.5 0 1 0 11 3.5V5zm0 6v1.5a1.5 1.5 0 1 0 1.5-1.5H11zm-6 0H3.5A1.5 1.5 0 1 0 5 12.5V11z"/>
</svg>
<br>
<span class="text-white textt">
Our Team
</span>
</a>
</li>
<li class="size">
<a href="#" >
<svg class="text-white activeee" width="2.5em" height="2.5em" viewBox="0 0 16 16" class="bi bi-gear" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"/>
<path fill-rule="evenodd" d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"/>
</svg>
<br>
<span class="text-white textt">
Setting
</span>
</a>
</li>
<li class="size">
<a href="#" >
<svg class="text-white activeee" width="2.5em" height="2.5em" viewBox="0 0 16 16" class="bi bi-toggles" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.5 9a3.5 3.5 0 1 0 0 7h7a3.5 3.5 0 1 0 0-7h-7zm7 6a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm-7-14a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zm2.45 0A3.49 3.49 0 0 1 8 3.5 3.49 3.49 0 0 1 6.95 6h4.55a2.5 2.5 0 0 0 0-5H6.95zM4.5 0h7a3.5 3.5 0 1 1 0 7h-7a3.5 3.5 0 1 1 0-7z"/>
</svg>
<br>
<span class="text-white textt">
Contact
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="beehive">
<div class="container">
<div class="polygon bg">
<button class="btn btn-warning hide">HHH</button>
</div>
<div class="polygon bg2">
<button class="btn btn-warning hide">HHH</button>
</div>
<div class="polygon bg3">
<button class="btn btn-warning hide">HHH</button>
</div>
<div class="polygon bg4">
<button class="btn btn-warning hide">HHH</button>
</div>
<div class="polygon bg5">
<button class="btn btn-warning hide">HHH</button>
</div>
</div>
<div class="container mr-6">
<div class="polygon bg6">
<button class="btn btn-warning hide">HHH</button>
</div>
<div class="polygon bg7">
<button class="btn btn-warning hide">HHH</button>
</div>
<div class="polygon bg8">
<button class="btn btn-warning hide">HHH</button>
</div>
<div class="polygon bg9">
<button class="btn btn-warning hide">HHH</button>
</div>
</div>
</div>
</div>
</body>
</html>کد های css
body{
font-family: Tahoma, Arial;
padding: 0px;
margin: 0px;
color: #e7e7e7;
font-size: 12px;
}
.back{
background: #393e42;
}
.mt-4c{
margin-top: 30px;
}
.ml-5c{
margin-left: 90px;
}
.activee{
color: #b69e40;
margin-top: 15px;
margin-bottom: 5px;
}
.activeee{
margin-top: 15px;
margin-bottom: 5px;
}
.text{
color: #b69e40;
font-size: large;
}
.textt{
font-size: large;
}
.size{
height: 100px;
width: 140px;
background: #343536;
text-align: center;
margin-right: 5px;
}
.polygon {
width: 200px;
height: 235px;
margin-left: 10px;
clip-path: polygon(0% 25%, 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%);
transition: all .6s ease;
}
.polygon:hover {
box-shadow: inset 0 0 0 200px rgba(36,36,36, 0.7);
}
.bg {
background-image: url(./1.jpg);
background-size: cover;
}
.bg2 {
background-image: url(./Image/2.jpg);
background-size: cover;
}
.bg3 {
background-image: url(./Image/3.jpg);
background-size: cover;
}
.bg4{
background-image: url(./Image/4.jpg);
background-size: cover;
}
.bg5 {
background-image: url(./Image/5.jpg);
background-size: cover;
}
.bg6 {
background-image: url(./Image/6.jpg);
background-size: cover;
}
.bg7 {
background-image: url(./Image/7.jpg);
background-size: cover;
}
.bg8 {
background-image: url(./Image/8.jpg);
background-size: cover;
}
.bg9 {
background-image: url(./Image/9.jpg);
background-size: cover;
}
.beehive {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 60px;
}
.container {
display: flex;
}
.mr-6 {
position: relative;
left: 105px;
bottom: 48px;
}
.hide{
display: none;
position: relative;
top: 100px;
left: 70px;
}
.hide:hover{
display: block;
}کد ها رو قرار دادم
شما دکمه رو به درستی مخفی کردید، ولی رویداد بَرملا شدن رو به درستی ننوشتید.
خط آخر رو به شکل زیر تصحیح کنید، درست میشه:
.polygon:hover .hide {
display: block;
}