[HTML] hover ausschalten?

Ich habe für jeden <a> Tag ein hover aktiviert.

Also das bei dem Hover die Farbe grau wird.

Wie kann ich das mit einer einzelnen klasse aktivieren

Also

.123:hover { 
}

Das ist die Klasse für das die Farbe beim Hover ausgeschaltet werden soll.

Kann ich das einfach mit color: none; lösen?

3 Antworten

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik

09.07.2020, 03:46

Direkt eines vorweg, Klassen und ID-Selektoren dürfen nicht mit einer Zahl beginnen. Was jetzt deinen Frage angeht, den Anker einfach mithilfe eines Klassen-Selektors ansprichst und dann dessen Aussehen und Verhalten mit CSS formatierst.

HTML:

<a class="link" href="#">Link</a>

CSS:

/* Element-Selektor */
a { color: green; }
a:hover { color: red; }

/* Klassen-Selektor */
.link { color: yellow; }
.link:hover { color: blue; }

Nutz in CSS die Kaskade. Leg erst einen globalen Wert fest und überschreibe diesen dann, falls dieses notwendig oder gewünscht ist. Vergib also eine anderen Wert. In diesem Fall z.B. eine andere Farbe.

LG medmonk

Greeeek

09.07.2020, 02:54

Passe es doch einfach dem Text an. Wenn dein Text schwarz ist, dann z.B.:

.123:hover{
color: black
}

Noxxxxxxxx

Fragesteller

09.07.2020, 03:02

Also darum ist dann ein border der grau ist.

Greeeek

09.07.2020, 03:04

@Noxxxxxxxx

Achso - tut mir Leid. Das habe ich nicht gelesen.
Dann könnte helfen:

.123:hover {
color: black
border: 0px 0px 5px;
border-color: grey;
}

Vielleicht konnte das helfen.

test8889

09.07.2020, 02:52

Kann ich das einfach mit color: none; lösen?

probiers aus

Hallo :)

Ich arbeite gerade an einer Website. Ich habe für das .html Dokument die Links alle als color: white definiert. Nun möchte ich aber einzelne Links einer div class in Farbe color: black haben.

Weiß jemand wie ich die einzelnen Linkfarben ändern kann?
Danke :)

...zur Frage

CSS :hover anderes Element wählen?

Hallo,

Ich bin mir nicht sicher ob sich hier jemand mit auskennt aber ich probier es trotzdem mal.

Also vor kurzen hab ich mit html und css angefangen, jetzt habe ich eine <ul>(Element2) erstellt und darunter noch eine weitere <ul>(Element2) : sprich, wenn man mit dem cursor daruf geht (:hover) so öffnet sie sich.

Was ich machen wollte ist, wenn man auf der zweiten <ul> drauf ist so soll die erste eine andere Farbe bekommen, sodass man erkennt auf welcher man sich gerade befindet.

Eigentlich müsste es doch so gehen

Element2:hover > Element1 {

color: red;

}

Normal funktioniert das ja auch bei anderen Sachen.

Das Zeichen ">" bedeutet doch, dass dann auf dieses Sache zugegriffen wird?

...zur Frage

Windows Sicherheitscenter lässt sich nicht aktivieren?

Windows Sicherheitscenter lässt sich nicht aktivieren?

Hallo, bei jedem PC start, steht bei mir, dass das Windows Sicherheitscenter nicht aktiviert ist. Ich bin also auf Dienste gegangen, Sicherheitscenter und wollte es auf automatisch setzen. Das ging aber nicht, weil es grau ausmakiert ist.

Gibts dort irgendeine Lösung?

Danke :D

...zur Frage

Habt ihr Erfahrungen mit der Farbe Poly Color Creme haarfarbe mittelblond?

Hallo Habe mir gestern meine Hellblonden Haare mit Poly Color Creme haarfarbe in mittelblond getönt nur was dabei rausgekommen ist , ist weit entfernt von mittelblond... Es ist dunkelbraun mit mega grau/grünstich!:( Die Farbe ist zwar Stufe 3 aber bei manchen wäscht sie sich trotzdem wieder raus Ist das bei dieser auch so? Habt ihr Erfahrungen mit der Farbe? Würde mich echt über eine Antwort freuen Bin echt verzweifelt Lg Biezzzz

...zur Frage

DIV Background Color bei Mouse-Enter zufällig ändern?

Hallo,
ich habe ein ganz normales HTML ELement und möchte, dass sich bei einem Mouse-Enter die Farbe ändert. Die Farbe soll sich zufällig durch voreingestelle Hexcodes ändern (Heist ich geb an #FF8000, #2E64FE, #F5BCA9 und er soll eine Farbe davon nehmen).

Das ganze soll KEIN Hover sein, d.h soll die Farbe bis zum nächsten Mouse-Enter bestehen bleiben.

Gibts es da ne einfache Lösung oder muss ich imch in Java-Script einarbeiten?
Technisch bin ich nicht ganz so fit.
Danke schonmal im Vorraus.

...zur Frage

Handy zur SIM-Aktivierung AN oder AUS?

Ich habe eine PrePaid Sim-Karte von Klarmobil gekauft und gestern mittag gegen 12:00 online Aktiviert. Bis jetzt ist sie noch nicht aktiv. Manche sagen, dass Handy solle aus sein, ansonsten kann sich die Sim nicht aktivieren, andere sagen es muss an sein. Frage: Muss ich das Handy nun am besten an- oder ausschalten damit sich die Karte am schnellsten aktiviert ?

...zur Frage

Wie bekomme ich die Stege im Glasbaufenster weiß

Ich habe ein Glasbaufenster an der Brandmauer zum Nachbarn. Die Stege zwischen den einzelnen Glassteinen sind grau-beton. Nun wollte ich dieses grau mit weißer Farbe anstreichen, aber die weiße Farbe versickert und wird immer wieder grau. Gibt es einen Trick, die Stege vorzubehandeln, damit die Farbe deckt? Es ist kein Schimmel an den Stegen. Nach zweimaligem Streichen sieht es immer noch grau aus und die Poren sind sichtbar. Danke für Antworten.

...zur Frage

CSS/Javascript: mit :hover ein anderes Element sichtbar machen?

Hallo ihr lieben,

ich hänge gerade an einem Programmierproblem. Ich möchte versuchen Banner Mapping zu programmieren und finde meinen (vermutlich dummen kleinen)Fehler nicht.

Hier der "bisherige" Code:

<html>

jQuery('#hoverdiv').hoverdiv(

function() {$('#Kindelement').show();},

function() {$('#Kindelement').hide();}

);

</script>

<style>

.hover

{

background-color: red;

z-index: 1;

}

.Kindelement

{

position: absolute;

top:0;

background-color: blue;

-moz-transition: all 0.5s ease 0s;

-webkit-transition: all 0.5s ease 0s;

transition: all 0.5s ease 0s;

opacity: 0;

z-index: 2;

}

.hoverdiv

{

position: relative;

}

.hoverdiv:hover + .Kindelement

{

opacity: 1;

}

</style>

</head>

<body>

<div id="hoverdiv" style="background: grey;

color: white;

border-radius: 50px !important;

font-family: "Helvetica Neue",

Arial, sans-serif !important;

float: none !important;" ;>

<div id="Kindelement"

style="color: white;

background: grey;

position: absolute;

top: 770px !important;

opacity: 0;">

</div>

</body>

</html>

Habe sehr viel probiert, aber finde keine Lösung in Google :( bei <a> ist der link natprlich ein richtiger link - nur aus Datenschutz zensiert :)

Es soll auf das hoverdiv gehovert werden und dadurch das Kindelement angezeigt werden - wenn man wieder mit der Maus davon runter geht soll es wieder verschwinden..

Dankeschön schonmal!

...zur Frage

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zur Frage

CSS + Hover + WP - Wie gleichzeitig Rahmen & Text hovern?

Hallo Community :)

Ich habe einen Rahmen mit Text (ein Link)

Wenn ich mit der Maus über den Rahmen gehe kommt ein Hover-Effekt (Rahmen-Farbe verändert sich).

Wenn ich dann weiter in die Mitte des Rahmens gehe bis zum Text (ein Titel mit Verlinkung), dann verändert er erst seine Text-Farbe

Ich möchte aber, dass sobald ich den Rahmen mit der Maus berühre, dass sowohl Rahmen UND Text den Howereffekt bekommen

Habt Ihr dafür eine Lösung?

.rahmen { border: 8px solid blau; }

.text a { color: blau; padding 40px 40px 40px 40px; }

.rahmen:HOVER { border: 8px solid rot; }

.text a:HOVER { color: rot; }

...zur Frage

jQuery: An- und Ausschalter programmieren mit einer Variablen Programmieren?

Ich muss folgende Aufgabe lösen:

"Beim Überfahren des großen Bildes wird die Grafik „bild1.jpg“ gegen die Grafik „bild2.jpg“ ausgetauscht – beim Verlassen des Bildes wird die ursprüngliche Grafik wieder angezeigt.

Dieses Austauschen funktioniert aber nur, wenn zuvor der Ausschalter mit einem Klick „angeschaltet“ wurde – Grafiktausch mit Datei „schalterein.png“. Wird der Schalter wieder ausgeschaltet, dann geht auch die Mouseover-Funktionalität nicht mehr. Wichtig: Arbeiten Sie mit einer Variablen namens schalter."

Bei dem Schalter handelt es sich um ein Image und keinen Button.

Der erste Teil der Aufgabe - der Grafiktausch beim Hovern - ist kein Problem.

Den Schalter bekomme ich aber nicht programmiert. In anderen Aufgaben haben wir immer einen separaten An- und Ausschalter programmiert, bisher nicht beides zusammen und ich komme einfach nicht auf eine Lösung.

Bisher habe ich nur den Anschalter programmiert (kann natürlich falsch sein):

var Schalter=0;

$("img:eq(2)").click(function (){ Schalter=1; $("img:eq(2)").attr("src","schalterein.png"); })

Wenn man wieder auf das Schalter img klickt soll der Schalter=0 werden, das Bild soll sich wieder ändern & somit wäre er ausgeschaltet.

Ob der Schalter auf 0 oder 1 steht dient zur Abfrage um den Hover Effekt/ Grafiktausch zu aktivieren bzw. deaktivieren.

Kann auch sein, dass mein Ansatz total falsch ist. Ich hoffe jemand kann mir hier weiterhelfen.

...zur Frage

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zur Frage

CSS Animation vor Redirect?

Hallo, ich hatte schonmal so eine ähnliche Frage gestellt aber bekomme es einfach nicht hin. Nun hab ich eine kleine Testumgebung gebaut, in der ich folgendes möchte:

Die Eingangsanimation spielt sich automatisch ab wenn die Seite geladen ist. Klicke ich auf den Go-Button in der Mitte (Später sollte das bei jedem Button passieren der eine bestimmte Klasse hat) dann soll der Klasse "intro" die Klasse "animation_out" hinzugefügt werden. Nach einer bestimmten Zeit (Am besten händisch per Ms änderbar) soll dann erst der Redirect erfolgen.

Gibt es da eine EINFACHE Lösung für Anfänger wie mich?

XXXXXXXX_____HTML_____XXXXXXXX

XXXXXXXX_____CSS_____XXXXXXXX

body{
margin: 0;
padding: 0;
}

.intro{
width: 100%;
height: 100vh;
position: fixed;
z-index: 9999;
padding: 0;
background-color: #000;
overflow: hidden;
pointer-events: none;
-webkit-animation: animation_in 1s 1; /* Safari 4.0 - 8.0 /
animation: animation_in 1s 1;
animation-fill-mode: forwards;
}

@keyframes animation_in {
0% {height: 100%;}
100% {height: 20px;}
}

.animation_out{
-webkit-animation: animation_out 1s 1; /* Safari 4.0 - 8.0 /
animation: redirectanimationout 1s 1;
}

@keyframes redirectanimationout {
0% {height: 20px;}
100% {height: 100%;}
}

.testbutton{
position: absolute;
background-color: #000;
color: #fff;
width: 50px;
padding: 5px 0;
text-align: center;
float: 0 auto;
margin-top: 50vh;
margin-left: calc(50% - 25px);
}

...zur Frage

Simkarte aktiviert - 3-5 Stunden Handy ausschalten!?

Ich habe heute meine neue Simkarte (über eteleon.de von Talkline) endlich aktivieren können und direkt danach kam die automatische Ansage, dass ich mein Handy die nächsten 3-5 Stunden ausgeschaltet lassen soll. Wenn ich mich richtig erinnere hab ich vorher woanders schonmal 2-3 Stunden gesagt bekommen. Was denn nun?

Aber so oder so: Warum denn bitte so lange? Und was passiert wenn ich es doch anmache?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen