bugfix> html > 投稿

HTMLでテキスト入力ボックスを作成しました。 CSSを追加してボックスを変更すると、ユーザーがマウスをその上に置いたときに影が変わりますが、ブラウザーで試したときにボックスの上にマウスを置いても何も変わりません。

.searchBar {
    position: absolute;
    top: 307px;
    right: 392.5px;
    width: 500px;
    border-radius: 0px;
    border: 1px solid #f3efee;
    height:40px;
    box-shadow: 0px 1px #f3efee;
}
.searchbar:focus {
    box-shadow: 10px 10px red;
}

回答 3 件
  • :focusと:hoverは異なるプロパティであることに注意してください。

  • この擬似クラスは、 .searchBar にカーソルを合わせると機能するはずです  素子:

    .searchBar:hover {
        box-shadow: 10px 10px red;
    }
    
    

  • .searchbar:focus を変更    .searchBar:focus へ  あなたのクラス名 .searchBar  大文字のBがあります。

    .searchBar {
        width: 500px;
        border-radius: 0px;
        border: 1px solid #f3efee;
        height:40px;
        box-shadow: 0px 1px #f3efee;
    }
    .searchBar:focus {
        box-shadow: 10px 10px red;
    }
    
    
    <div style="background: yellow; padding: 30px">
    <input type="text" class="searchBar" />
    </div>
    
    
     

あなたの答え