2016-05-03 11 views
0

ご協力いただきありがとうございます。私はCSSには比較的新しいので、以前はトランジションで作業していませんでした。リンクホバー効果を適用すると、リンクが表示されなくなります(ホバー効果は機能しますが)。何かご意見は?

ここでは、背景イメージとテキストブロックを持つ単純なdivがあります。ここではCSSホバー効果の前にcodepinが追加されます:http://codepen.io/miskellaneousness/pen/vGQoWa

<div class="col bodybox sportsb" style="background-image: url(http://i.imgur.com/Lq76c1G.jpg);"> 
     <h3><a href="generic-article.html" class="hvr-sci"> 
      <span class="singleline"> 
       Kayak or Surfboard? 
      </span></a> 
     </h3> 
</div> 

はここに関連するCSSです:

.bodybox { 
width: 23.8%; 
background-color: #D5DBDB; 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
height: 240px; 
padding-left: 4px; 
color: pink; 
background-size: cover; 
background-position: -18px; 
} 
h3 span { 
position: relative; 
top: 100px; 
left: 10px; 
width: 100%; 
color: white; 
font: bold 24px/45px Helvetica, Sans-Serif; 
letter-spacing: -1px; 
background: rgb(0, 0, 0); 
background: rgba(0, 0, 0, 0.7); 
padding: 10px; 
} 

私もCSSを変換ボタンを追加すると、テキストが消えます。 div内のテキストの位置をスクロールすると、ボタンエフェクトは機能しますが、テキストは表示されません。ここではCSSとCodepenが追加されます:ここで

http://codepen.io/miskellaneousness/pen/RaqXGyは追加のCSSです:作るように見えた.hvr-SCIに隠された:私はcodepenにあなたのCSSを追加し、そのオーバーフローを削除

.hvr-sci { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    position: relative; 
    overflow: hidden; 
    } 
.hvr-sci:before { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    left: 0; 
    right: 100%; 
    bottom: 0; 
    background: #f1c40f; 
    height: 2px; 
    -webkit-transition-property: right; 
    transition-property: right; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease-out; 
    transition-timing-function: ease-out; 
} 
.hvr-sci:hover:before, .hvr-sci:focus:before, .hvr-sci:active:before { 
right: 0; 
} 
+0

希望の結果をどのようにして表示するかについて、実際に詳しく説明してください。 – Nirri

答えて

0

ライン効果。あなたが望む効果があれば100%確信していませんか?

+0

申し訳ありませんが、私は私のCodepensをリンクする悪い仕事をしました。 CSSを追加する前のdivは次のとおりです。http://codepen.io/miskellaneousness/pen/vGQoWa CSSを追加した後のdivは次のとおりです。http://codepen.io/miskellaneousness/pen/RaqXGyご覧のように、2番目のテキストでは、テキストが消えています。 'overflow:hidden'を削除すると、ホバー効果が表示されますが、間違った場所に表示されます。 – miskellaneousness

関連する問題