0

画像のようなリンクホバースタイルが純粋なcssを使用して可能かどうか、またはこれを実現するには背景画像、js、jqueryなどを使用する必要があるかどうか疑問に思いました。

ここに画像の説明を入力してください

どんな例でも大歓迎です:)ありがとう、

4

3 に答える 3

1

最善の方法（たとえば、Internet Explorerをサポートする必要がある場合、またはカスタム矢印が必要な場合）は、で背景を使用することです。50% 100%

HTML：

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Another link</a></li>
</ul>

CSS：

li { float: left; padding-bottom: 16px; }
li:hover { background: 50% 100% no-repeat url(http://www.staypoland.com/images/arrow-city-up.gif); }
a { float: left; }
a:hover { background: blue; }​

http://fiddle.jshell.net/Mcz3P/

于 2012-09-26T07:48:17.960 に答える
1

css pseudo classe：afterを使用して、矢印を作成できます。これにより、意味のないHTMLコードを減らすことができます。

HTML：

<div class="div">
      About Us
</div>​

CSS：

.div {
    color: #fff;
    background-color: #09f;
    border: 2px solid #09f;
    font-size: 16px;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 100px;
}
.div:after {
    display: block;
    content: "";
    overflow: hidden;
    position: absolute;
    left: 50px;
    bottom: -10px;
    border-style: solid;
    border-width: 10px;
    border-color:  transparent transparent #09f transparent;
    height: 0;
    width: 0;
}

​

ここでデモを見ることができます：http：//jsfiddle.net/JMaV8/

于 2012-09-26T08:01:29.100 に答える
0

はい、画像なしで純粋なCSSで可能です。たとえばCSSdeckで、興味を引くかもしれない非常にクールなものを見つけることができます。また、@ afshinのデモは、どこから始められるかを示す良い例です。だから続けて...

于 2012-09-26T07:54:58.327 に答える