Hover mit mehreren ID/Klasse

Ich habe die HTML folgende, die funktioniert:Hover mit mehreren ID/Klasse

<div class="preview"> 
     <div class="image"> 
      <img src="SomeFile/SomeImage.gif"> 
     </div> 
     <h2>Some heading</h2> 
     <p>Some text</p> 
    </div>

Und die folgende CSS (das funktioniert):

.preview:hover > h2 {display: none;} 
.preview:hover > p {display: block;}

Wenn ich ein neues <div id="newID"> um den HTML hinzuzufügen, Wie aktualisiere ich das CSS, um mit dem neuen ID-Wrapper zu arbeiten?

Wie verwende ich auch mehrere IDs in der CSS, um zu vermeiden, dies für jede ID neu zu schreiben?

Dank

Quelle

2016-08-30 Zac Warham

versuchen, neu hinzugefügt Was mit der Verwendung einer Klasse falsch, wie Sie jetzt sind? –

Ihre Frage ist nicht genau klar. Und Ihre zweite Frage ist genau, wofür Klassen sind. Mit Klassen können Sie das gleiche CSS gleichzeitig auf mehrere Elemente auf der Seite anwenden. IDs sind eindeutige Bezeichner und wirklich nur notwendig, wenn Sie tatsächlich ein bestimmtes Element auf der Seite identifizieren müssen. –

Der Code, den Sie jetzt haben, funktioniert gut, ich bekomme immer noch nicht den Punkt, ein div mit einer ID als Wrapper hinzuzufügen. https://jsfiddle.net/p2p32bqz/ –

Wenn Sie den Stil müssen nur auf die Elemente angewendet werden, die Kinder auf die neue Wrapper sind, dann können Sie nur die ID-Auswahl wie folgt hinzufügen:

#newID .preview:hover > h2 {display: none;}

Ansonsten don Sie Ich muss nichts ändern.

Quelle

2016-08-30 13:36:00

Suchen Sie das?

<div id="newID"> 
    <div class="preview"> 
      <div class="image"> 
       <img src="SomeFile/SomeImage.gif"> 
      </div> 
      <h2>Some heading</h2> 
      <p>Some text</p> 
    </div> 
    <div class="preview"> 
      <div class="image"> 
       <img src="SomeFile/SomeImage.gif"> 
      </div> 
      <h2>Some heading</h2> 
      <p>Some text</p> 
    </div> 
    </div>

Ihre CSS:

#newID .preview:hover > h2 {display: none;} 
#newID .preview:hover > p {display: block;}

Quelle

2016-08-30 13:39:49

-1

Wenn Ihre ID gleiche Struktur verwenden, zum Beispiel # newid-x, # newid-y, # newid-z, können Sie schreiben Sie CSS-Regel alle ID-Targeting beginnen mit newid-

div[id^='newid-']:hover > h2, div[id*=' newid-']:hover >h2 { 
    display: none; 
}

Quelle

2016-08-30 13:40:41

Wer downvote kann mir erklären warum? –

Verwenden Klasse für mehrere Elemente mit dem gleichen Stil Styling:

.yourClass:hover {}

Quelle

2016-08-30 13:43:29 KuboK

Ich weiß, das ist möglich, aber es muss in diesem Fall eine ID sein –

ich nicht ganz verstanden, was Sie suchen, aber wenn Sie die CSS anzuwenden versuchen divs dann können Sie diese

<html><head> 
<style> 
.preview { border: 1px solid black;width:200px} 
.preview:hover > h2 {display: none;} 
.preview:hover > p {display: block;} 
</style> 
<script src=path/to/jquery.js></script> 
</head><body> 

<button class=plus>Add</button> 
<div class="preview"> 
     <div class="image"> 
      <img src="SomeFile/SomeImage.gif"> 
     </div> 
     <h2>Some heading</h2> 
     <p>Some text</p> 
    </div> 


<script> 

// Button Adds a new div with the class 'preview' 
$('button.plus').click(function() { 
    var new_id = '<div id="newID" class=preview>New Div <br/> <h2>Some heading</h2> <p>Some text</p></div>'; 
    $('body').append(new_id); 
}); 



</script> 
</body></html>

Quelle

2016-08-30 13:49:43 MoolsBytheway

Hover mit mehreren ID/Klasse

Antwort

Verwandte Themen