پرش به محتوا

دایره دنبال کننده - فراغیب

از فراغیب
تفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<html> <style> ←===== گرید دسته‌بندی =====: .cat-grid{ direction:rtl; display:grid; grid-template-columns:repeat(2,1fr); gap:28px 18px; max-width:1200px; margin:auto; padding:20px 10px; list-style:none; } .cat-item{ position:relative; text-align:center; min-width:0; } .cat-link{ position:relative; display:block; color:#222; text-decoration:none; font-weight:700; font-size:14px; ou...» ایجاد کرد
 
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html>
<style>
<style>
/* ===== گرید دسته‌بندی ===== */
/* =========================
.cat-grid{
  Product Grid | Mobile First
========================= */
.product-grid{
   direction:rtl;
   direction:rtl;
   display:grid;
   display:grid;
   grid-template-columns:repeat(2,1fr);
   grid-template-columns:repeat(2,1fr);
   gap:28px 18px;
   gap:24px 10px;
  width:100%;
   max-width:1200px;
   max-width:1200px;
   margin:auto;
   margin:auto;
   padding:20px 10px;
   padding:15px 6px;
   list-style:none;
   list-style:none;
  box-sizing:border-box;
}
}


.cat-item{
.product-item{
   position:relative;
   min-width:0;
   text-align:center;
   text-align:center;
  min-width:0;
}
}


.cat-link{
.product-link{
   position:relative;
   position:relative;
   display:block;
   display:block;
   color:#222;
   color:#222;
   text-decoration:none;
   text-decoration:none;
   font-weight:700;
   padding:4px;
  font-size:14px;
  outline:none;
}
}


/* کادر مربع اطراف دایره */
/* کادر مربعی دور عکس */
.cat-circle{
.product-box{
   position:relative;
   position:relative;
   width:140px;
   width:145px;
   height:140px;
   height:145px;
   max-width:100%;
   max-width:100%;
   margin:auto;
   margin:auto;
  border-radius:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:1px solid transparent;
}
/* دایره عکس */
.product-circle{
  width:120px;
  height:120px;
  border:2px solid #e3e8ee;
   border-radius:50%;
   border-radius:50%;
  border:2px solid #e4e9ef;
   background:#fff;
   background:#fff;
   display:flex;
   display:flex;
   align-items:center;
   align-items:center;
   justify-content:center;
   justify-content:center;
   overflow:visible;
   box-sizing:border-box;
  transition:box-shadow .2s ease;
}
 
/* فقط هاله آبی هنگام هاور */
.cat-link:hover .cat-circle,
.cat-link:focus-visible .cat-circle{
  box-shadow:0 0 0 2px rgba(0,119,255,.18),
            0 0 25px rgba(0,119,255,.28);
}
}


.cat-circle img{
.product-circle img{
   width:88%;
   width:88%;
   height:88%;
   height:88%;
خط ۶۱: خط ۶۷:
}
}


/* متن زیر دایره */
/* عنوان */
.cat-title{
.product-title{
   display:block;
   display:block;
   margin-top:13px;
   margin-top:8px;
   line-height:1.7;
  font-size:14px;
  font-weight:700;
   line-height:1.8;
}
}


/* دایره کوچک دنبال‌کننده موس */
 
.mouse-view{
/* ==================================
  position:absolute;
  فقط دستگاه‌هایی که موس دارند
  width:58px;
================================== */
  height:58px;
@media (hover:hover) and (pointer:fine){
  border:2px solid #1479ff;
 
  border-radius:50%;
  /* هاور کادر مربعی */
  background:rgba(255,255,255,.88);
  .product-link:hover .product-box,
  display:flex;
  .product-link:focus-visible .product-box{
  align-items:center;
    border-color:rgba(20,121,255,.22);
  justify-content:center;
 
  color:#1479ff;
    background:
  font-size:12px;
      linear-gradient(
  font-weight:700;
        135deg,
  pointer-events:none;
        rgba(221,236,255,.75),
  opacity:0;
        rgba(239,246,255,.35)
  transform:translate(-50%,-50%);
      );
  transition:opacity .15s ease;
 
   z-index:5;
    box-shadow:
      0 8px 28px rgba(20,121,255,.15),
      0 0 35px rgba(20,121,255,.13);
  }
 
  /* هاور خود دایره */
  .product-link:hover .product-circle,
  .product-link:focus-visible .product-circle{
    border-color:#1479ff;
 
    box-shadow:
      0 0 0 1px rgba(20,121,255,.08),
      0 0 20px rgba(20,121,255,.18);
  }
 
  /* دایره مشاهده */
  .mouse-view{
    position:absolute;
    width:54px;
    height:54px;
    border:2px solid #1479ff;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:#1479ff;
    font-size:12px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,-50%);
    z-index:5;
   }
 
  .product-link:hover .mouse-view{
    opacity:1;
  }
}
}


.cat-link:hover .mouse-view{
 
  opacity:1;
/* =========================
  Tablet
========================= */
@media (min-width:600px){
  .product-grid{
    grid-template-columns:repeat(3,1fr);
    gap:35px 20px;
  }
}
}


/* دسکتاپ */
 
@media (min-width:768px){
/* =========================
   .cat-grid{
  Desktop
========================= */
@media (min-width:900px){
   .product-grid{
     grid-template-columns:repeat(4,1fr);
     grid-template-columns:repeat(4,1fr);
     gap:55px 35px;
     gap:45px 25px;
     padding:30px 15px;
     padding:25px 15px;
  }
 
  .product-box{
    width:155px;
    height:155px;
   }
   }


   .cat-circle{
   .product-circle{
     width:140px;
     width:140px;
     height:140px;
     height:140px;
   }
   }


   .cat-title{
   .product-title{
     font-size:16px;
     font-size:16px;
   }
   }
}
}


/* موبایل‌های خیلی کوچک */
 
/* =========================
  صفحه عریض
========================= */
@media (min-width:1100px){
  .product-grid{
    grid-template-columns:repeat(5,1fr);
  }
}
 
 
/* =========================
  موبایل کوچک
  بدون موشن
========================= */
@media (max-width:380px){
@media (max-width:380px){
   .cat-grid{
   .product-grid{
     gap:25px 10px;
     gap:20px 5px;
     padding:15px 5px;
     padding:12px 3px;
  }
 
  .product-box{
    width:135px;
    height:135px;
   }
   }


   .cat-circle{
   .product-circle{
     width:125px;
     width:115px;
     height:125px;
     height:115px;
   }
   }


   .cat-title{
   .product-title{
     font-size:13px;
     font-size:13px;
   }
   }
}
}


/* کاهش انیمیشن برای کاربران حساس */
 
@media (prefers-reduced-motion:reduce){
/* =========================
   .cat-circle,.mouse-view{transition:none}
  موبایل
  فقط هایلایت، بدون موشن
========================= */
@media (hover:none){
 
   .mouse-view{
    display:none !important;
  }
 
  .product-box,
  .product-circle{
    transition:none !important;
  }
 
  /* لمس/فعال شدن فقط هایلایت */
  .product-link:active .product-box{
    background:rgba(221,236,255,.7);
    border-color:rgba(20,121,255,.25);
    box-shadow:
      0 8px 25px rgba(20,121,255,.15),
      0 0 30px rgba(20,121,255,.12);
  }
 
  .product-link:active .product-circle{
    border-color:#1479ff;
  }
}
}
</style>
</style>


<ul class="cat-grid" aria-label="دسته‌بندی محصولات">


   <li class="cat-item">
<ul class="product-grid" aria-label="دسته‌بندی محصولات">
     <a class="cat-link" href="#" title="فر و ماکروفر">
 
       <span class="cat-circle">
  <!-- 1 -->
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="فر و ماکروفر">
   <li class="product-item">
     <a class="product-link" href="#" title="فر و ماکروفر">
       <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-1.jpg" alt="فر و ماکروفر" loading="lazy">
        </span>
         <span class="mouse-view">مشاهده</span>
         <span class="mouse-view">مشاهده</span>
       </span>
       </span>
       <span class="cat-title">فر و ماکروفر</span>
       <span class="product-title">فر و ماکروفر</span>
     </a>
     </a>
   </li>
   </li>


   <li class="cat-item">
  <!-- 2 -->
     <a class="cat-link" href="#" title="سایر یراق آلات">
   <li class="product-item">
       <span class="cat-circle">
     <a class="product-link" href="#" title="سایر یراق آلات">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="سایر یراق آلات">
       <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-2.jpg" alt="سایر یراق آلات" loading="lazy">
        </span>
         <span class="mouse-view">مشاهده</span>
         <span class="mouse-view">مشاهده</span>
       </span>
       </span>
       <span class="cat-title">سایر یراق آلات</span>
       <span class="product-title">سایر یراق آلات</span>
     </a>
     </a>
   </li>
   </li>


   <li class="cat-item">
  <!-- 3 -->
     <a class="cat-link" href="#" title="سینک">
   <li class="product-item">
       <span class="cat-circle">
     <a class="product-link" href="#" title="سینک">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="سینک">
       <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-3.jpg" alt="سینک" loading="lazy">
        </span>
         <span class="mouse-view">مشاهده</span>
         <span class="mouse-view">مشاهده</span>
       </span>
       </span>
       <span class="cat-title">سینک</span>
       <span class="product-title">سینک</span>
     </a>
     </a>
   </li>
   </li>


   <li class="cat-item">
  <!-- 4 -->
     <a class="cat-link" href="#" title="دستگیره">
   <li class="product-item">
       <span class="cat-circle">
     <a class="product-link" href="#" title="دستگیره">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="دستگیره">
       <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-4.jpg" alt="دستگیره" loading="lazy">
        </span>
         <span class="mouse-view">مشاهده</span>
         <span class="mouse-view">مشاهده</span>
       </span>
       </span>
       <span class="cat-title">دستگیره</span>
       <span class="product-title">دستگیره</span>
     </a>
     </a>
   </li>
   </li>


   <li class="cat-item">
  <!-- 5 -->
     <a class="cat-link" href="#" title="اکسسوری">
   <li class="product-item">
       <span class="cat-circle">
     <a class="product-link" href="#" title="اکسسوری">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="اکسسوری">
       <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-5.jpg" alt="اکسسوری" loading="lazy">
        </span>
         <span class="mouse-view">مشاهده</span>
         <span class="mouse-view">مشاهده</span>
       </span>
       </span>
       <span class="cat-title">اکسسوری</span>
       <span class="product-title">اکسسوری</span>
     </a>
     </a>
   </li>
   </li>


   <li class="cat-item">
  <!-- 6 -->
     <a class="cat-link" href="#" title="دستگیره دیجیتال">
   <li class="product-item">
       <span class="cat-circle">
     <a class="product-link" href="#" title="دستگیره دیجیتال">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="دستگیره دیجیتال">
       <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-6.jpg" alt="دستگیره دیجیتال" loading="lazy">
        </span>
         <span class="mouse-view">مشاهده</span>
         <span class="mouse-view">مشاهده</span>
       </span>
       </span>
       <span class="cat-title">دستگیره دیجیتال</span>
       <span class="product-title">دستگیره دیجیتال</span>
     </a>
     </a>
   </li>
   </li>


   <li class="cat-item">
  <!-- 7 -->
     <a class="cat-link" href="#" title="شیر آلات">
   <li class="product-item">
       <span class="cat-circle">
     <a class="product-link" href="#" title="شیر آلات">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="شیر آلات">
       <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-7.jpg" alt="شیر آلات" loading="lazy">
        </span>
         <span class="mouse-view">مشاهده</span>
         <span class="mouse-view">مشاهده</span>
       </span>
       </span>
       <span class="cat-title">شیر آلات</span>
       <span class="product-title">شیر آلات</span>
     </a>
     </a>
   </li>
   </li>


   <li class="cat-item">
  <!-- 8 -->
     <a class="cat-link" href="#" title="یراق آلات">
   <li class="product-item">
       <span class="cat-circle">
     <a class="product-link" href="#" title="یراق آلات">
        <img src="https://dl.faraghaib.ir/m/260015/26001515.jpg" alt="یراق آلات">
       <span class="product-box">
        <span class="product-circle">
          <img src="IMAGE-URL-8.jpg" alt="یراق آلات" loading="lazy">
        </span>
         <span class="mouse-view">مشاهده</span>
         <span class="mouse-view">مشاهده</span>
       </span>
       </span>
       <span class="cat-title">یراق آلات</span>
       <span class="product-title">یراق آلات</span>
     </a>
     </a>
   </li>
   </li>


</ul>
</ul>


<script>
<script>
document.querySelectorAll('.cat-link').forEach(item => {
/* فقط دسکتاپ: دایره مشاهده موس را دنبال می‌کند */
  const view = item.querySelector('.mouse-view');
if (window.matchMedia('(hover:hover) and (pointer:fine)').matches) {
 
  document.querySelectorAll('.product-link').forEach(link => {
 
    const view = link.querySelector('.mouse-view');
 
    link.addEventListener('mousemove', e => {
 
      const box = link.querySelector('.product-box');
      const r = box.getBoundingClientRect();
 
      let x = e.clientX - r.left;
      let y = e.clientY - r.top;
 
      x = Math.max(27, Math.min(x, r.width - 27));
      y = Math.max(27, Math.min(y, r.height - 27));


  item.addEventListener('mousemove', function(e) {
      view.style.left = x + 'px';
    const rect = item.getBoundingClientRect();
      view.style.top = y + 'px';


     view.style.left = (e.clientX - rect.left) + 'px';
     });
    view.style.top  = (e.clientY - rect.top) + 'px';
  });


  item.addEventListener('mouseenter', function() {
    view.style.opacity = '1';
   });
   });


  item.addEventListener('mouseleave', function() {
}
    view.style.opacity = '0';
  });
});
</script>
</script>
</html>
</html>

نسخهٔ ‏۱۷ اوت ۲۰۲۶، ساعت ۱۰:۳۱

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:دایره_دنبال_کننده&oldid=6505»