0

特定のアイコンだけでなく、div全体にカーソルを合わせると、フォントアイコンのサイズがスケーリングされるdivを作成しようとしています。次のようなもの: http://fortawesome.github.io/Font-Awesome/icons/明確にするために、<li>アイテムにカーソルを合わせると、特定のアイコンがスケーリングされますが、残りはスケーリングされません。アイコン自体のマウスオーバー時にサイズを変更する方法は知っていますが、残りのdivにカーソルを合わせたときにサイズを変更する必要があります。

これは、jQuery/javascript を使用せずに、CSS を介して単純に行うことが可能かどうか疑問に思っています。前もって感謝します。

4

3 に答える 3

3

私が考えることができる最も簡単な例...

<h1><span>★&lt;/span>your text?</h1>

このようなもの...

h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 1rem;
    line-height: 1.8em;
    border: 1px solid red;
    padding: 1em; 
}

h1 span {
    display: inline-block;
    vertical-align: middle;
-webkit-transition: all 0.3s ease-out; 
   -moz-transition: all 0.3s ease-out; 
     -o-transition: all 0.3s ease-out; 
        transition: all 0.3s ease-out;    
}

右から左に考えてください。

h1:hover h1 span {
    font-size: 3em;      
}

「 h1 内の任意のスパンで、 h1: がホバーされている間 -> これを行う...」




ラウンド 2: これはそれを綴る必要があります。

HTML

<ul class="icon-list">
    <li>
        <a href="#">
            <div class="your-icon">&#9731;</div>
            Some text that doesn't move.
        </a>
    </li>
</ul>

CSS

.icon-list {
    list-style: none;
    padding: 0;
}

.icon-list li a {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    text-decoration: none;
    padding: 0 .5em;
    color: #111;
    -webkit-border-radius: 1em;
            border-radius: 1em;
}

.icon-list li a:hover {
    background-color: rgba(255,0,0,.1);
}

.icon-list li a .your-icon {
    display: inline-block;
    float: left;
    width: 32px;
    height: 32px;
    text-align: center;
}

.icon-list li a:hover .your-icon {
    font-size: 28px;
}
于 2013-06-01T04:12:06.987 に答える