懸停對圖像的影響

我想知道爲什麼我的懸停效果不起作用。現在我有一個圖像，當我將光標移到它上面時，我想要這樣的圖像。懸停對圖像的影響

當然我寫這個效應的代碼，但它不會在懸停效果的工作。你能解釋我做得怎麼樣？就像你可以看到我已經嘗試與顯示：無，然後顯示：塊，但沒有發生。我會很感激的幫助。

HTML代碼

<section class="products"> 
     <h1 class="products__title"><span>Wspierane</span> produkty</h1> 
    <div class="products__wrap"> 
     <div class="products__box"> 
      <img src="http://i.imgur.com/Zrd6Mgu.png" alt=""> 
      <p>hera</p> 
     </div> 
     <div class="products__box"> 
      <img src="http://i.imgur.com/Zrd6Mgu.png" alt=""> 
      <p>elektra</p> 
     </div> 
     <div class="products__box"> 
      <img src="http://i.imgur.com/Zrd6Mgu.png" alt=""> 
      <p>rainbow</p> 
     </div> 
     <div class="products__box"> 
      <img src="http://i.imgur.com/Zrd6Mgu.png" alt=""> 
      <p>roboclean</p> 
     </div> 
     <div class="products__box"> 
      <img src="http://i.imgur.com/Zrd6Mgu.png" alt=""> 
      <p>rainbow d4</p> 
     </div> 
    </div> 
    </section>

SCSS代碼

$font: 'Lato', sans-serif; 
$break-medium: 45em; 
$break-large: 75em; 
@function calculateRem($size) { 
    $remSize: $size/16px; 
    @return $remSize * 1rem; 
} 
@mixin font-size($size) { 
    font-size: $size; 
    font-size: calculateRem($size); 
} 
* { 
    margin: 0; 
    padding: 0; 
} 
.products { 
    width: 100%; 
    height: 1600px; 
    background-color: rgb(255,255,255); 
    @media only screen and (min-width: $break-large) { 
     height: 500px; 
    } 

    &__title { 
     margin: 0; 
     font-family: $font; 
     @include font-size(35px); 
     font-weight: 700; 
     text-align: center; 
     color: rgb(13,13,13); 
     padding-top: 35px; 
     padding-bottom: 45px; 
     @media only screen and (min-width: $break-medium) { 
      @include font-size(50px); 
     } 

     span { 
      font-weight: 900; 
     } 
    } 

    &__wrap { 
     @media only screen and (min-width: $break-large) { 
      display: flex; 
      flex-direction: row; 
      justify-content: center; 
      align-items: center; 
     } 
    } 

    &__box { 
     width: 240px; 
     background-color: rgb(255,255,255); 
     margin: 0 auto; 
     position: relative; 
     margin-top: 30px; 
    } 

    p { 
     font-family: $font; 
     font-weight: 700; 
     @include font-size(30px); 
     text-transform: uppercase; 
     color: rgb(247,248,249); 
     text-align: center; 
     white-space: nowrap; 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
     @media only screen and (min-width: $break-large) { 
      display: none; 

      &:hover { 
       display: block; 
      } 
     } 

     &::before { 
      content: ''; 
      background-color: rgb(10,198,162); 
      width: 240px; 
      height: 60px; 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      z-index: -200; 
     } 
    } 
}

來源

2016-11-29 Patryk Dąbrowski

你想要的是，p元素將得到display: blocked一旦你懸停.products__box元素（這是它的父母）：

.products__box p{ 
    display: none; 
} 
.products__box:hover p{ 
    display: block; 
}

入住此更新：
https://jsfiddle.net/dnttrb7q/1/

來源

2016-11-29 17:43:59 Dekel

您需要使用圖片上懸停，通過使用加顯示第（+）選擇

這是應該是這樣的：

p{ 
    display:none; 
}

並且由於p是IMG後：

img:hover + p { 
    display:block; 
}

來源

2016-11-29 17:44:01 Chiller

您正在將懸停效果放在p標記上，即display: none。如果沒有顯示，元素不佔用頁面上的空間，所以你實際上並沒有在它上面懸停。我可以想出2種方法來解決這個問題。

首先，您可以嘗試visibility: hidden，該元素不可見，但仍在頁面上。或者你可以把懸停效果放在外部div上。但是，你將不得不找到孩子的p標籤來改變它的顯示。

來源

2016-11-29 17:44:26

懸停對圖像的影響

回答

相關問題