अरे दोस्तों इस उदाहरण पर एक नज़र डालें। (पूर्ण स्क्रीन देखें) आप देख सकते हैं कि तत्व होवर पर अस्पष्टता बदलते हैं।

हालांकि, दूसरी पंक्ति में फ्लेक्स-रैप करने वाले फ्लेक्स आइटम इसी होवर के साथ ऊंचाई को स्थानांतरित या बदलते प्रतीत होते हैं ... यह बाउंस प्रभाव की तरह दिखता है। अस्पष्टता के अलावा कुछ भी अलग नहीं होना चाहिए। मैंने अपने संक्रमण में केवल अस्पष्टता को लक्षित करने की कोशिश की, फ्लेक्स की कोशिश की: 0 0 23%; इसलिए लिंक का आकार नहीं बदलना चाहिए, लेकिन फिर भी वही परिणाम मिलता है।

मूल रूप से जब से मैंने अस्पष्टता होवर/संक्रमण जोड़ा है, फ्लेक्स आइटम की दूसरी पंक्ति होवर पर उछालती है।

क्या हो रहा है?

.nav-dropdown {
  display: block;
  width: 100%;
  max-width: 980px;
  padding: 30px;
  background-color: #fbfbfb;
}

.nav-dropdown-image-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-link {
  flex: 0 1 23%;
  margin-bottom: 20px;
}

.image-link a {}

.image-link a img {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  opacity: 1;
  transition: 0.3s;
}

.image-link a img:hover {
  opacity: 0.9;
}
<div class="nav-dropdown">
  <div class="nav-dropdown-image-links">
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
  </div>
</div>
0
StefanBob 24 मई 2018, 20:29

1 उत्तर

सबसे बढ़िया उत्तर

निम्नलिखित शैली का प्रयोग करें

.image-link * {
    -webkit-backface-visibility: hidden;
}

यह लिंक बताता है कि हमें इसकी आवश्यकता क्यों है।

.nav-dropdown {
  display: block;
  width: 100%;
  max-width: 980px;
  padding: 30px;
  background-color: #fbfbfb;
}

.nav-dropdown-image-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-link {
  flex: 0 1 23%;
  margin-bottom: 20px;
}

.image-link a {}

.image-link a img {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  opacity: 1;
  transition: 0.3s;
}

.image-link a img:hover {
  opacity: 0.9;
}
.image-link * {
    -webkit-backface-visibility: hidden;
}
<div class="nav-dropdown">
  <div class="nav-dropdown-image-links">
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
    <div class="image-link">
      <a href="https://placeholder.com">
        <img src="http://via.placeholder.com/260x168">
      </a>
    </div>
  </div>
</div>
2
Nandita Sharma 24 मई 2018, 20:53