0

あなたの助けが必要です。

ラッパー/コンテナー DIV でホバーを適切に機能させることができないようです

CSS:

#myhover:hover {
    border: 1px solid red;
}

HTML:

<div id="myhover" style="background: #ffffff; 
      width: 177px; height: 20px; border: 1px solid #808080;">
    <div style="float: left;">
        <input id="refdocs" style="padding-left: 4px; padding-right: 3px; 
                  height: 15px; width: 158px; border: none;" type="text">
    </div>
    <div style="line-height:18px; font-size: 11pt;  color: #779297;">+</div>
</div>
4

4 に答える 4

3

インライン スタイルはカスケード内で最も具体的であるため、意図しないものを上書きする可能性があります。スタイルをスタイル シートに移動する#myhoverと、正常に動作するはずです。

例えば：

#myhover {
    background: #ffffff; 
    width: 177px; 
    height: 20px; 
    border: 1px solid #808080;
}

jsfiddle: http://jsfiddle.net/va8Bz/

于 2013-02-07T20:21:42.750 に答える
1

属性styleがスタイルシート セレクターをオーバーライドしています。より具体的です。

ここには 3 つのオプションがあります。

  1. スタイルをstyle属性の外に移動します。
  2. スタイルをstyle属性の外に移動します。
  3. !important属性内のものをオーバーライドする必要があるスタイル宣言に追加しstyleます。

styleスタイルを属性からスタイルシートに移動することをお勧めします。

例: http://jsfiddle.net/Y7NW9/

于 2013-02-07T20:23:18.547 に答える
0

インラインスタイルを使用する代わりに、すべてのCSSをスタイルシートに貼り付ける必要があります。


あなたが達成しようとしていることは、より少ないマークアップでも行うことができます：

<div class="container">
    <input class="refdocs" type="text">
    <div class="icon">+</div>
</div>


次に、CSSスタイルシートで：

.container {
    display: inline-block;
    position: relative;
}

.input-wrapper {
    float: left;
}

.refdocs {
    border: 1px solid #808080;
    padding: 2px;
    padding-right: 14px;
    margin: 0;
}

.refdocs:hover {
    border: 1px solid red;
}

.icon {
    font-size: 11pt;
    position: absolute;
    top: 3px;
    right: 5px;
}

これが実際のデモです

于 2013-02-07T20:37:05.373 に答える