cursor:default

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
12 Juli 2018
44
0
6
51
#1
Hallo,

ich suche nach einer Möglichkeit, um den Effekt "cursor:default" beim Anklicken mit der Maus auf der Startseite (Home) zu nutzen. Derzeit ist es wie folgt aufgebaut:


Code:
 <div id="nav">
    <a href="#">HOME</a>
    .
    .
 </div>
Hätte ich beispielsweise die a-Tags mit <li> versehen, so würde ich schreiben:

Code:
  <li class="aktiv"><a href="#">HOME</a></li>
Und dann in CSS:

Code:
li.aktiv a {
 cursor:default;
}

Frage:

Wie kann ich das in mein bestehendes System einfügen, dass NUR auf der Startseite der Home-Button nicht anklickbar sein soll?

Vielen Dank!
 

scbawik

Senior HTML'ler
14 Juli 2011
2.494
437
83
#2
Hallo,

ich suche nach einer Möglichkeit, um den Effekt "cursor:default" beim Anklicken mit der Maus auf der Startseite (Home) zu nutzen. Derzeit ist es wie folgt aufgebaut:


Code:
 <div id="nav">
    <a href="#">HOME</a>
    .
    .
</div>
Hätte ich beispielsweise die a-Tags mit <li> versehen, so würde ich schreiben:

Code:
  <li class="aktiv"><a href="#">HOME</a></li>
Und dann in CSS:

Code:
li.aktiv a {
cursor:default;
}

Frage:

Wie kann ich das in mein bestehendes System einfügen, dass NUR auf der Startseite der Home-Button nicht anklickbar sein soll?

Vielen Dank!
Ich versteh kein Wort, rate aber mal ins Blaue:

Code:
pointer-events:none;
 
12 Juli 2018
44
0
6
51
#5
Nun, ich wollte das in CSS machen. Meine Frage ist nur, wie kann ich den a-Tag in CSS ansprechen und ihm den Ausdruck

Code:
cursor:default;
mitgeben. Das soll NUR greifen, wenn die Startseite angewählt ist ...
 

scbawik

Senior HTML'ler
14 Juli 2011
2.494
437
83
#8
Ok, Danke scbawik!

Aber ich muss doch den Ausdruck "active" noch irgendwie in meinen Code

Code:
<div id="nav">
    <a href="#">HOME</a>
    .
    .
</div>
(in HML) einbinden - oder?
HTML:
<ul>
  <li class="active"><a>HOME</a></li>
  <li>...</li>
  <li>...</li>
</ul>
CSS:
.active:first-child {
  pointer-events:none;
}
Aber warum lässt du den Link nicht einfach gleich weg?
 
Zustimmungen: basti1012

Sailor

Aktives Mitglied
14 Juli 2017
318
32
28
#10
Sorry - ich verstehe hier nur 'Bahnhof'.
Die Frage lautet doch, wie kann ich nur auf der Startseite den Link zur Startseite deaktivieren... auf allen anderen Seiten soll ja der Link zur Startseite aktiv sein.

Jetzt sollte die Gegenfrage an den TE lauten, wie wird das Nav-Menü auf der/den Seite/Seiten eingefügt? Per PHP 'include'... manuell... wird das evtl. von einem CMS (zB WordPress) erzeugt?

Etwas verwirrend ist die Nutzung der Klasse '.active' - würde ich persönlich nicht verwenden, denn :active ist im CSS eine Pseudoklasse, mit der ich einen aktiven Link formatieren kann. Leider hilft diese Pseudoklasse in diesem Fall nicht, denn ein aktiver Link ist nicht mehr aktiv, wenn die Seite (nach klicken des Links) neu aufgebaut wird. Das hat mal zu Zeiten funktioniert, als man noch mit Frames gearbeitet hat und die aufgerufen Seite sich in einem anderen Frame befand als der aufrufende Link.

Hier müsste man zB ein Alleinstellungsmerkmal der Startseite finden bzw. einfügen... etwa eine Page ID im Body-Tag... um den Selektor für den zu deaktivierenden Link zielgenau (nur für die Startseite) zu spezifizieren.
zB
CSS:
#home .active {
    pointer-events: none;
}
 

scbawik

Senior HTML'ler
14 Juli 2011
2.494
437
83
#11
Sorry - ich verstehe hier nur 'Bahnhof'.
Die Frage lautet doch, wie kann ich nur auf der Startseite den Link zur Startseite deaktivieren... auf allen anderen Seiten soll ja der Link zur Startseite aktiv sein.

Jetzt sollte die Gegenfrage an den TE lauten, wie wird das Nav-Menü auf der/den Seite/Seiten eingefügt? Per PHP 'include'... manuell... wird das evtl. von einem CMS (zB WordPress) erzeugt?

Etwas verwirrend ist die Nutzung der Klasse '.active' - würde ich persönlich nicht verwenden, denn :active ist im CSS eine Pseudoklasse, mit der ich einen aktiven Link formatieren kann. Leider hilft diese Pseudoklasse in diesem Fall nicht, denn ein aktiver Link ist nicht mehr aktiv, wenn die Seite (nach klicken des Links) neu aufgebaut wird. Das hat mal zu Zeiten funktioniert, als man noch mit Frames gearbeitet hat und die aufgerufen Seite sich in einem anderen Frame befand als der aufrufende Link.

Hier müsste man zB ein Alleinstellungsmerkmal der Startseite finden bzw. einfügen... etwa eine Page ID im Body-Tag... um den Selektor für den zu deaktivierenden Link zielgenau (nur für die Startseite) zu spezifizieren.
zB
CSS:
#home .active {
    pointer-events: none;
}
Habe ja das Alleinstellungsmerkmal gefunden: "home" ist der erste Link im Menü.
Dafür muss man keine unnötigen IDs irgendwo ins HTML mogeln und somit reicht ein :first-child.

Mit der Pseudoklasse hat das natürlich nichts zu tun, diese Verbindung hast aber auch nur du dir ausgedacht.
 

Sailor

Aktives Mitglied
14 Juli 2017
318
32
28
#12
Habe ja das Alleinstellungsmerkmal gefunden: "home" ist der erste Link im Menü.
Ja... auf jeder Seite. Der Link zu 'home' soll aber nur auf der Startseite deaktiviert werden.
genau so, wie ich .hover... .focus... und alle anderen mit einer im CSS und HTML vorbelegten Bedeutung nicht nicht als Klassenname verwenden würde.
 

scbawik

Senior HTML'ler
14 Juli 2011
2.494
437
83
#13
Ja... auf jeder Seite. Der Link zu 'home' soll aber nur auf der Startseite deaktiviert werden.
Nein, .active UND :first-child gibt es nur bei aktiver Startseite.

genau so, wie ich .hover... .focus... und alle anderen mit einer im CSS und HTML vorbelegten Bedeutung nicht nicht als Klassenname verwenden würde.
.active ist keine ungewöhnliche Bezeichnung um etwas aktives zu kennzeichnen. Kurz und treffend.
Und da der TE bereits .aktiv verwendet hat, verwende ich das englische Äquivalent dazu. In meinen eigenen Projekten verwende ich .is-active/.is-current aber das tut ja nichts zur Sache hier.
 
Zuletzt bearbeitet:
12 Juli 2018
44
0
6
51
#14
HTML:
<ul>
  <li class="active"><a>HOME</a></li>
  <li>...</li>
  <li>...</li>
</ul>
CSS:
.active:first-child {
  pointer-events:none;
}
Das ist ja genau das Problem, das ich in meinem ersten Thread angesprochen habe - ich benutze nicht <ul> und <li>

Somit lässt sich "active" bei mir in HTML so nicht einbauen!

Meine Code in HTML lautet - wie schon geschrieben:

Code:
<div id="nav">
    <a href="#">HOME</a>
    <a href="#">KONTAKT</a>
    .
    .
</div>
Frage: Gibt es auch hier eine Möglichkeit dieses "active" zu verwenden?
 

scbawik

Senior HTML'ler
14 Juli 2011
2.494
437
83
#15
Das ist ja genau das Problem, das ich in meinem ersten Thread angesprochen habe - ich benutze nicht <ul> und <li>

Somit lässt sich "active" bei mir in HTML so nicht einbauen!

Meine Code in HTML lautet - wie schon geschrieben:

Code:
<div id="nav">
    <a href="#">HOME</a>
    <a href="#">KONTAKT</a>
    .
    .
</div>
Frage: Gibt es auch hier eine Möglichkeit dieses "active" zu verwenden?
Das ändert doch nichts an der Funktionsweise. Statt ul>li hast du halt div>a.

Gib dem <a> die Klasse .active und schon hast du das gleiche Ergebnis.
 
18 Dezember 2017
76
3
8
#19
Hallo @faith ,
ich will ja jetzt nicht unproduktiv sein und folgender Text soll auch nicht böse gemeint sein, aber das
Das ist ja genau das Problem, das ich in meinem ersten Thread angesprochen habe - ich benutze nicht <ul> und <li>

Somit lässt sich "active" bei mir in HTML so nicht einbauen!

[...]

Frage: Gibt es auch hier eine Möglichkeit dieses "active" zu verwenden?
zeigt, dass du noch nicht so viel Ahnung von HTML oder zumindest CSS und den Id's bzw. Klassen hast.
Lerne doch erst mal die betreffenden Sprachen richtig, bevor du dich an die Thematik wagst, denn das, was du als Fragestellung gebracht hast ist nichts, was man im Internet nicht oder nur mit viel Suchen findet. Dazu gibt es viele Tutorials und Hilfestellungen, die man sich ansehen kann. (krieg das bitte nicht in den falschen Hals, das waren nur Vermutungen aufgrund deines Posts und natürlich kannst du, auch wenn es stimmen sollte, dass du noch nicht so viel Ahnung hast auch so rumtüfteln, aber man tut sich ja auch leichter, wenn man weiß, was man da tippt oder einkopiert :wink:)

Grüße,
Felixprogram