DIV Contrainer mit Hover und OnClick

aLive667 · 19. September 2016

Ich hab einen DIV-Container.
Diesen wollte ich für den PC mit hover und für das Smartphone mit OnClick ein Fester anzeigen lassen.
Sprich ein weiteres DIV.

CSS

.entry {
	border: 1px solid black;
	padding: 2px;
	position: absolute;
	overflow: hidden;
	display: inline-block;
	float: right;
	left: 90px;
    z-index: 2;	
}

HTML

<ul class="entry" style="background-color:#B6E1F6;width:90px;height:1320px;left:180px;top:124px";/>
<li>
2010/09 - 2016/02
<br />
<b>Berufliche Weiterbildung</b>
</li>
</ul>

jetzt wollte ich, wenn man auf diesen ul container Klickt am Smartphone das Fenster anzeigen lassen. ALternativ noch am PC reicht wenn man mit der Maus drüberfährt.

Wie wäre da ein Lösungsansatz?

lg Thorsten

MrMurphy · 19. September 2016

Hallo

Zitat

Wie wäre da ein Lösungsansatz?

Es gibt keinen, da es mit HTML und CSS weder möglich ist PCs von Smartphones oder Desktop-Monitore von Smartphone-Monitoren zu unterscheiden.

Gruss

MrMurphy

JR Cologne · 19. September 2016

Zitat von MrMurphy

Es gibt keinen, da es mit HTML und CSS weder möglich ist PCs von Smartphones oder Desktop-Monitore von Smartphone-Monitoren zu unterscheiden.

What?!

aLive667 Um einen Div-Container einblenden zu können, muss sich dieser erstmal im HTML befinden. Anschließend kannst du diesen standardmäßig mit "display: none;" ausblenden.

Um ihn beim Drüberfahren mit der Maus einzublenden, verwendest du den :hover-Selektor und "display: block;".

Das Einblenden per Klick wird schon etwas komplizierter. Da benötigst du entweder einen Link (a-Tag) und den Selektor :target oder du verwendest JavaScript.

Hier mal ein Beispiel mit dem :target-Selektor.

HTML

<a href="#openContainer">Open Container</a>




<div id="openContainer">Container</div>

CSS

#openContainer {
   display: none;
}




@media only screen and (max-width: 800px) {
   #openContainer:target {
      display: block;
   }
}

Alles anzeigen

Sempervivum · 20. September 2016

Wenn es um Klick vs. Hover geht, würde ich eher empfehlen, danach zu unterscheiden, ob Touch unterstützt wird und nicht nach Bildschirmgröße. Ich verwende dazu folgendes:

JavaScript

var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));

(So bei stackoverflow gefunden, diese Quelle halte ich für zuverlässig.)

JR Cologne · 21. September 2016

Wenn man JS verwenden möchte, wäre das eine gute Alternative. Das stimmt.

DIV Contrainer mit Hover und OnClick

Jetzt mitmachen!

Teilen