2

ウェブサイトで問題が発生しています。ホームページに画像があります。画像の上にはCSSアニメーションボタンがあり、ボタンのロールオーバーでアニメーション化されます。

私がする必要があるのは、画像とボタンのロールオーバーで、アニメーションをトリガーすることです。現時点では、実際のボタンのロールオーバーでのみアニメーション化されます。

アニメーションは純粋に css ですが、これをトリガーするには Javascript を使用する必要があると想定していますが、どのように記述すればよいかわかりません。

以下は私のhtmlです：

<span class="overlay"></span> - (this is the image)
<span class="button-hover" data-text="@item.Name"><span>@item.Name</span></span> -   (this is the button)

これは私のcssです：

.home #primary-nav li a span.overlay {
    position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%;
    background-color: rgba(12, 133, 191, 0.3); opacity: 0;  
}

*, :before, :after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.button,
[class*="button-"] {
    z-index:3;
    margin:0 -15px 0 -15px;
    position: absolute;
    font-family: 'Alright Sans', 'Trebuchet MS', Arial, sans-serif;
    font-size: 2.4em;
    font-weight:600; 
    text-transform: uppercase;
    overflow: hidden;
    line-height:0.8; 
    padding: 5px 5px 5px 5px;
    height: 33px;
    color: #fff;
    background-color: rgba(0,173,239,0.7);
    -webkit-transition: 0.35s ease all;
    -moz-transition: 0.35s ease all;
    -o-transition: 0.35s ease all;
    transition: 0.35s ease all;
}

.button-hover:hover
{
    line-height: 9em;
}

.button-hover:before {
    font-family: 'Alright Sans', 'Trebuchet MS', Arial, sans-serif; text-transform:       uppercase;
    content: attr(data-text);
    color: #DEEFF5;
    position: absolute;
    top: -3.99em;
}
4

1 に答える 1

1

これが正しいかどうかはわかりませんが...このコード行をcssに追加してみてください

.overlay:hover .button-hover{
   line-height: 9em;
}

同様の質問:親 div にカーソルを合わせると、css 背景画像の位置がトリガーされます

于 2013-08-22T11:42:18.370 に答える