• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

(Bootstrap 3) Jak zmienić kolor przycisku lub linku po jego naciśnięciu / użyciu?

Aruba Cloud - Virtual Private Server VPS
+1 głos
5,499 wizyt
pytanie zadane 19 czerwca 2015 w HTML i CSS przez marcin1333 Początkujący (400 p.)
edycja 19 czerwca 2015 przez marcin1333

Witam,

gorąca prośba o pomoc bo już braknie mi włosów na głowie do wyrywania...

Jak w bootstrapie 3 mogę zmienić kolor przycisku (button) lub kolor linku już po jego kliknięciu? Chodzi o kolor tła a nie napisu. Wiem jak zmienić kolor przycisku (btn), po najechaniu (hover) i w momencie naciskania (focus)... 

ale mi chodzi o kolor już po naciśnieciu który zostaje zmieniony dopuki nie naciśneimy innego elementu na stronie... a ja chciałbym, aby po kliknięciu on wracał do koloru sprzed najechania i naciśnięcia.

w CCSie mam:

.navbar
{
min-height: 80px;
background-color: white;
border-color: rgba(255, 255, 255, 0);
border-radius: 0px;
}

.navbar-default .navbar-nav > li > a 
{
    color: #0C4375;
    background-color: white;
}
.navbar-default .navbar-nav > li > a:hover
{
    background-color: yellow;
}

.navbar-default .navbar-nav > li > a:focus 
{
    color: #0C4375;
	background-color: red;
}

//* to nie działa... jak powinno być właściwe? żeby kolor background wrócił automatycznie na biały?*//
.navbar-default .navbar-nav > li > a:visited 
{
    background-color: white;
}

 

 

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>M</title>
	<link rel="shortcut icon" href="favicon.ico" />
   <meta name="author" content="m" />
   <meta name="description" content="M" />
    <meta name="keywords" content="M" />
	<link href='http://fonts.googleapis.com/css?family=Comfortaa:400,700,300&subset=latin,latin-ext,cyrillic-ext' rel='stylesheet' type='text/css'>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="style.css" type="text/css" />
	

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
  
<!--NAVIGACJA-->
  
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <!-- Grupowanie "marki" i przycisku rozwijania mobilnego menu -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
            <span class="sr-only">Rozwiń nawigację</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="col col-md-12 col-xs-9 hidden-sm">
		  <img alt="Miejskie Przedszkole nr 6" src="img/logo_280.png" class="img-responsive logomp6"></img>
		  </div>
		  <div class="col col-sm-10 hidden-xs hidden-md hidden-lg">
		  <img alt="Miejskie Przedszkole nr 6" src="img/logo_100.png" class="img-responsive logomp6"></img>
		  </div>
        </div>
     
        <!-- Grupowanie elementów menu w celu lepszego wyświetlania na urządzeniach moblinych -->
        <div class="collapse navbar-collapse" id="main-nav">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#" class="scroll-link iconnav" data-id="karta0"><img alt="Do góry" src="img/glowna_icon.png" class="hidden-xs center-block"></img>Do góry</a></li>
			<li><a href="#" class="scroll-link iconnav" data-id="karta1"><img alt="Aktualności" src="img/aktual_icon.png" class="hidden-xs center-block"></img>Aktualności</a></li>
			<li><a href="#" class="scroll-link iconnav" data-id="karta2"><img alt="Przedszkole" src="img/przedsz_icon.png" class="hidden-xs center-block"></img>Przedszkole</a></li>
			<li><a href="#" class="scroll-link iconnav" data-id="karta3"><img alt="Rodzice" src="img/dlar_icon.png" class="hidden-xs center-block"></img>Rodzice</a></li>
			<li><a href="#" class="scroll-link iconnav" data-id="karta4"><img alt="Galeria" src="img/galeria_icon.png" class="hidden-xs center-block"></img>Galeria</a></li>
			<li><a href="#" class="scroll-link iconnav" data-id="karta5"><img alt="Kontakt" src="img/kontakt_icon.png" class="hidden-xs center-block"></img>Kontakt</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
	<script src="js/smsc.js"></script>
  </body>
</html>

- tu można zobaczyć jak przyciski zostają ciemniejsze po kliknięciu w nie do momentu kliknięcia w inny element:

http://www.w3schools.com/bootstrap/bootstrap_ref_css_buttons.asp

Bardzo prosze o pomoc

1 odpowiedź

0 głosów
odpowiedź 19 czerwca 2015 przez HaKIM Szeryf (87,590 p.)

Zedytuj klase odpowiadającą za ten przycisk, dodaj:

    background-color: #000000;

Powinno śmigać.

Równie dobrze można samemu stworzyć ładnego buttona w max. 2min. :)

Albo dodać style="" do przycisku, ale wątpie aby udało Ci się tam zmieścić :hover, focus i active. :)

~ Aby wracał do wersji przed nacisięciem... A spróbuj zmienić :focus na :active, bo :focus utrzymuje się do momentu w którym klikniesz na inny element.

http://www.w3schools.com/cssref/sel_active.asp - Active, to co Ty musisz użyć.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_focus - Focus.

komentarz 19 czerwca 2015 przez HaKIM Szeryf (87,590 p.)
Daj kod css i html.
komentarz 19 czerwca 2015 przez marcin1333 Początkujący (400 p.)
Już dodałem kolego, jak możesz to pomóż.
komentarz 19 czerwca 2015 przez HaKIM Szeryf (87,590 p.)

Nie rozumiem... 

ale mi chodzi o kolor już po naciśnieciu który zostaje zmieniony dopuki nie naciśneimy innego elementu na stronie... a ja chciałbym, aby po kliknięciu on wracał do koloru sprzed najechania i naciśnięcia.

- Przecież to działa tak, jak Ty chcesz. Po kliknięciu, na coś innego element ten, wraca do formy domyślnej.

komentarz 19 czerwca 2015 przez HaKIM Szeryf (87,590 p.)
//* to nie działa... jak powinno być właściwe? żeby kolor background wrócił automatycznie na biały?*//

.navbar-default .navbar-nav > li > a:visited

{

    background-color: white;

}

- Działa, zmień na red. Bo navbar masz 255 255 255 - white.
komentarz 19 czerwca 2015 przez marcin1333 Początkujący (400 p.)
edycja 19 czerwca 2015 przez marcin1333
Ja piszę jak teraz się dzieje, że kolor wraca dopiero po kliknięciu na inny element, a chciałbym aby on zaraz po puszczeniu kolor przycisku sam wracal do koloru sprzed kliknięcia

Podobne pytania

+1 głos
1 odpowiedź 671 wizyt
pytanie zadane 10 lipca 2015 w PHP przez migacz100 Mądrala (5,410 p.)
0 głosów
1 odpowiedź 753 wizyt
+1 głos
2 odpowiedzi 765 wizyt

93,329 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,662 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...