メニューの上にメニューが表示されているときにメニューテキストを拡大しようとしています

Question

ここではかなりの子どものエラーですが、私はそれを動作させることができません。

メニューの特定のリストにカーソルを合わせると、そのメニューのテキストのサイズが大きくなりますが、現時点ではは実際のボックスではなくテキストを表示するとサイズが大きくなります「テキストがであることを

ul li :hover{ 
font-size: 30px; 
font-family:sans-serif; 
} 


ul li a{ 
font-size: 20px; 
font-family:sans-serif; 
} 

すべてのヘルプは高く評価され、感謝

Answer 1

あなたが必要です。上の効果を得るためにaを選択するも、その後li後に直接する擬似セレクタを置いて、 liの上にカーソルを合わせます。私は大きなサイズの行の高さを追加して、liのサイズにジャンプすることなくテキストのサイズを拡大できるようにしました。

ul li { 
 
    list-style:none; 
 
    height:30px; 
 
} 
 

 
ul li a{ 
 
    font-size: 20px; 
 
    font-family:sans-serif; 
 
    text-decoration:none; 
 
    line-height:30px; 
 
} 
 

 
ul li:hover a{ 
 
    font-size: 30px; 
 
}

<ul> 
 
    <li><a href = "#">One</a></li> 
 
    <li><a href = "#">Two</a></li> 
 
    <li><a href = "#">Three</a></li> 
 
</ul>

Answer 2

.menu { 
 
    border:1px solid #ddd; 
 
    padding:20px; 
 
    display:inline-block; 
 
} 
 

 
.menu a { 
 
    font-size:14px; 
 
} 
 

 
.menu a:hover { 
 
    font-size:30px; 
 
} 
 

 

 
.menu2 { 
 
    border:1px solid #ddd; 
 
    padding:20px; 
 
    width:200px; 
 
    height:20px; 
 
} 
 

 
.menu2 a { 
 
    font-size:14px; 
 
} 
 

 
.menu2 a:hover { 
 
    font-size:30px; 
 
}

Box will expand 
 
<br /> 
 
<br /> 
 
<div class="menu"> 
 
    <a href="#">test</a> 
 
    <a href="#">test 2</a> 
 
</div> 
 

 

 

 
Box will not expand 
 
<br /> 
 
<br /> 
 
<div class="menu2"> 
 
    <a href="#">test</a> 
 
    <a href="#">test 2</a> 
 
</div>

Answer 3

問題は、私には明らかではありません。しかし、あなたはこのようなものを実現したいと思う。

ul li{ 
    border-style:solid; 
    border-width:1px; 
    width:80px; 
} 

ul li a:hover{ 
    font-size: 30px; 
    font-family:sans-serif; 
} 

ul li a{ 
    font-size: 20px; 
    font-family:sans-serif; 
} 
<ul style="list-style-type:none;"> 
    <li><a>Item1</a></li> 
    <li><a>Item2</a></li> 
    <li><a>Item3</a></li> 
</ul>