contenteditableのスタイルはどのようにホバリングされますか？

div内の要素の背景を変更したいときにのみ、その要素のcontenteditableがtrueのときに移動します。contenteditableのスタイルはどのようにホバリングされますか？

私が試してみました：

#myDiv[contenteditable="true"]:hover { background-color: rgba(217, 245, 255,0.5);}

をしかし、それは動作しません。そして、私はdiv要素に疑似クラスを移動した場合：

#myDiv:hover [contenteditable="true"] { background-color: rgba(217, 245, 255,0.5);}

そして、すべてのフィールドをして、真=のcontentEditableは、バックグラウンドを取得...任意のトリックは、純粋なCSSでこれを修正するには？

EDIT：HTMLの例：

<div id="myDiv"> 
    <span contenteditable="true">blabla</span> 
    <div "subdiv" contenteditable="true">blibli</div> 
</div>

出典

2016-02-09 Vincent Teyssier

我々はあまりにも、あなたのHTMLを見ることができますか？ – mbacon40

これは、その後に言えば、あなたはそれを持っていたとして、セレクタを作る[contenteditable="true"]

.myDiv:hover > *[contenteditable="true"] { 
 
    background-color: rgba(217, 245, 255,0.5); 
 
}

<div class="myDiv"> 
 
    <p contenteditable="true">Lorem ipsum dolor sit amet.</p> 
 
    <span contenteditable="true">Lorem ipsum dolor.</span> 
 
    <p contenteditable="false">Lorem ipsum dolor.</p> 
 
</div>

出典

2016-02-09 21:26:07

div内の要素を変更したいのですが、div自体ではなく –

ありがとう！その作品...もう1つの質問、なぜ.myDiv：ホバー> *ではなく、.myDiv *：ホバーですか？ –

@Vincent Teyssier私の答えを更新しました。これは 'myDiv'の中の' contenteditable = "true"で全てを選択します。 ' –

で.myDivのすべての直接の子を選択します* その次。

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled Document</title> 
 
    <style> 
 
    #editor[contenteditable="true"]:hover * { 
 
     border: 3px inset grey; 
 
     width: 400px; 
 
     height: 200; 
 
     margin: 30px; 
 
    } 
 
    #editor .editable:hover { 
 
     background-color: rgba(217, 245, 255, 0.5); 
 
    } 
 
    .circle { 
 
     border-radius: 60px; 
 
     width: 30px; 
 
     height: 30px; 
 
     background: red; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="editor" class="editable" contenteditable="true"> 
 
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxxxxxxxxxxxxxxxxxxxxxXXXXXXXXXXXXXXX|||||||||||||||||||| 
 
    <br/> 
 
    <div class="circle"></div> 
 
    <div class="editable"></div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-02-09 21:35:52 zer00ne

ありがとう、私は* –

contenteditableのスタイルはどのようにホバリングされますか？

答えて

関連する問題