2016-11-29 195 views
0

我想知道为什么我的悬停效果不起作用。 现在我有一个图像,当我将光标移到它上面时,我想要这样的图像。悬停对图像的影响

enter image description here

当然我写这个效应的代码,但它不会在悬停效果的工作。 你能解释我做得怎么样? 就像你可以看到我已经尝试与显示:无,然后显示:块,但没有发生。 我会很感激的帮助。

这里有一个jsfiddle democodepen demo

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; 
     } 
    } 
} 

回答

1

你想要的是,p元素将得到display: blocked一旦你悬停.products__box元素(这是它的父母):

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

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

1

您需要使用图片上悬停,通过使用加显示第(+)选择

这是应该是这样的:

p{ 
    display:none; 
} 

并且由于p是IMG后:

img:hover + p { 
    display:block; 
} 
1

您正在将悬停效果放在p标记上,即display: none。如果没有显示,元素不占用页面上的空间,所以你实际上并没有在它上面悬停。我可以想出2种方法来解决这个问题。

首先,您可以尝试visibility: hidden,该元素不可见,但仍在页面上。或者你可以把悬停效果放在外部div上。但是,你将不得不找到孩子的p标签来改变它的显示。