Button nie działa

pytanie zadane 24 marca 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)
edycja 24 marca 2021 przez Nearr

W miejscu w którym jest fontello i napis, button nie działa. Mam ustawionego hovera na przycisk, więc kiedy najadę na przycisk to zmienia kolor z szarego na niebieski, ale kiedy najadę na napis albo fontello nie zmienia koloru.

body {
    background-color: #2e2e2e;
    color: #cecece;
}

/*START OF MAIN--------------------------------------------------------------------------------------------> */

#container {
    width: 1700px;
    height: 900px;
    margin-left: auto;
    margin-right: auto;
}

#main {
    width: 1200px;
    height: 580px;
    top: 50%;
    left: 50%;
    transform: translate(20%, 40%);
}

#left {
    float: left;
    width: 380px;
    min-height: 570px;
    background-color: #1d1d1d;
    border: 1px solid #0a0a0a; 
    border-radius: 4px;
    box-shadow: 0px 0px 7px #0a0a0a;
    margin-right: 9px;
    margin-left: 9px;
}

#mid {
    float: left;
    width: 370px;
    min-height: 570px;
    background-color: #1d1d1d;
    border: 1px solid #0a0a0a; 
    border-radius: 4px;
    box-shadow: 0px 0px 7px #0a0a0a;
    margin-right: 9px;
    margin-left: 9px;   
}


#right {
    float: left;
    width: 380px;
    height: 570px;
    text-decoration: none;
}

#profile {
    float: left;
    width: 380px;
    min-height: 210px;
    background-color: #1d1d1d;
    border: 1px solid #0a0a0a; 
    border-radius: 4px;
    box-shadow: 0px 0px 7px #0a0a0a;
    margin-right: 9px;
    margin-left: 9px;
    margin-top: 9px;
    text-decoration: none;
}

#settings {
    float: left;
    width: 380px;
    min-height: 340px;
    background-color: #1d1d1d;
    border: 1px solid #0a0a0a; 
    border-radius: 4px;
    box-shadow: 0px 0px 7px #0a0a0a;
    margin-right: 9px;
    margin-left: 9px;
    margin-bottom: 9px;
    font-family: 'Josefin Sans', sans-serif;
}

input[name="Skin-URL"] { 
    background-color: #272727;
    color: #cecece;
    outline: 1px;
    border: 1px solid #272727;
    border-radius: 3px;
    transform: translate(5%, 1195%);
    width: 324px;
    height: 27px;
    padding: 5px;
}

input[name="Nickname"] { 
    background-color: #272727;
    color: #cecece;
    outline: 1px;
    border: 1px solid #272727;
    border-radius: 3px;
    transform: translate(8%, 965%);
    width: 192px;
    height: 27px;
    padding: 5px;
}

input[name="Tag"] { 
    background-color: #272727;
    color: #cecece;
    outline: 1px;
    border: 1px solid #272727;
    border-radius: 3px;
    transform: translate(20%, 965%);
    width: 108px;
    height: 27px;
    padding: 5px;
}

input[name="buttonplay"] {
    background-color: #272727;
    color: #cecece;
    border: 1px solid #272727;
    border-radius: 3px;
    width: 280px;
    height: 33px;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    transform: translate(6%, 1350%);
    outline: 1px;
    text-decoration: none;
    cursor:pointer;
}

.play-ins {
    width: 0px;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 0px 0px 2px black;
    font-family: 'Ubuntu', sans-serif;
    transform: translate(120%, 2210%);
    margin-left: 153px;
}

.play-ins:hover {
    background-color: #175cb8;
}

input:hover[name="buttonplay"] {
    background-color: #175cb8;
    box-shadow: 0px 1px 3px #175cb8;
}

input[name="buttonspectate"] {
    background-color: #272727;
    color: #cecece;
    border: 1px solid #272727;
    border-radius: 3px;
    width: 45px;
    height: 33px;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    transform: translate(680%, 1130%);
    text-decoration: none;
    outline: 1px;
    cursor:pointer;
}

input:hover[name="buttonspectate"] {
    background-color: #d1b006;
    box-shadow: 0px 1px 3px #d1b006;
}

/*END OF INPUT---------------------------------------------------------------------------------------------> */
/*---------------------------------------------------------------------------------------------------------- */
/*START OF SETTINGS----------------------------------------------------------------------------------------> */

.settings-ins {
    color: #ffffff;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 50px;
    text-align: center;
    margin-top: 20px;
}

.parting {
    width: 320px;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    border: 1px #0a0a0a dashed;
    border-radius: 8px;
}


/*END OF SETTINGS------------------------------------------------------------------------------------------> */
/*---------------------------------------------------------------------------------------------------------- */
/*START OF LOGIN-------------------------------------------------------------------------------------------> */

#buttonlogin {
    background-color: #131313;
    border: 1px solid #000000;
    width: 300px;
    height: 50px;
    border-radius: 8px;
    margin-top: 10px;
    margin-left: 35px;;
    margin-right: auto;
    font-size: 19px;
    font-family: 'Josefin Sans', sans-serif;
}


.loginbuttonins {
    color: #ffffff;
    font-family: 'Josefin Sans', sans-serif;
    color: #ffffff;
    margin-top: 17px;
    margin-left: 10px;
    text-decoration: none;
}

.loginins , #profile >a {
    font-size: 17px;
    margin-left: 15px;
    margin-top: 35px;
    font-weight: 1px;
    text-align: left;
    color: #ffffff;
    text-shadow: 1px 1px 2px black;
    font-family: 'Roboto Mono', monospace;
    text-decoration: none;
}


.loginins {
    font-size: 17px;
    margin-left: 15px;
    margin-top: 40px;
    font-weight: 1px;
    text-align: left;
    color: #ffffff;
    text-shadow: 1px 1px 2px black;
    font-family: 'Roboto Mono', monospace;
}


/*END OF LOGIN---------------------------------------------------------------------------------------------> */
/*---------------------------------------------------------------------------------------------------------- */
/*START OF SOCIALS-----------------------------------------------------------------------------------------> */

#socials {
    margin-bottom: 50px;
    width: 300px;
    min-height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: 50%;
    transform: translate(-50%, 1518%);
    text-decoration: none;
    color: #ffffff;   
}

.dc {
    float: left;
    background-color: #738adb;
    width: 170px;
    height: 34px;
    border-radius: 5px;
    margin-right: 10px;
    box-shadow: 1px 1px 3px #111111;
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
    margin-top: -5px;
}

.dc:hover {
    background-color: #5e75c2;;
}

.yt {
    background-color: #FF0000;
    width: 125px;
    height: 34px;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #111111;
    font-family: 'Josefin Sans', sans-serif;
    text-decoration: none;
    margin-top: 0px;
    margin-left: 180px;
}

.yt:hover {
    background-color: #be0202;
}

.yt-ins {
    float: left;
    width: 120px;
    height: 35px;
    border-radius: 5px;
    font-family: 'Josefin Sans', sans-serif;
    margin-top: -20px;
    margin-left: 20px;
    text-decoration: none;
    color: #ffffff;
    text-shadow: 2px 2px 2px black;
}

.dc-ins {
    float: left;
    width: 120px;
    height: 35px;
    border-radius: 5px;
    font-family: 'Josefin Sans', sans-serif;
    margin-top: -19px;
    margin-left: 35px;
    text-decoration: none;
    color: #ffffff;
    text-shadow: 1px 1px 2px black;
}

.iconify {
  float: left;
  font-size: 25px; 
  margin-left: 10px; 
  margin-top: 5px;    
  text-decoration: none;
  color: #ffffff;
  text-shadow: 2px 2px 2px black;
}

/*END OF SOCIALS-------------------------------------------------------------------------------------------> */
/*---------------------------------------------------------------------------------------------------------- */
/*START OF TOGGLE1------------------------------------------------------------------------------------------>*/
  
input[name="chck1"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
  
  .toggle-1-trail {
    margin-top: 100px;
    margin-left: 100px;
    display: flex;
    align-items: center;
    width: 40px;
    height: 26px;
    background: #2c3e50;
    border-radius: 2.5em;
    transition: all 0.5s ease;
    cursor: pointer;
}
  
  .toggle-1-handler {
    display: flex;
    margin-left: 3px;;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background: #1c2731;
    border-radius: 50%;
    transition: all 0.5s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
  .toggle-1-handler:before {
    content: "×";
    color: white;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
    margin-left: -1px;
}
  
  input[name="chck1"]:checked + .toggle-1-trail {
    background: #16a085;
}
  input[name="chck1"]:checked + .toggle-1-trail .toggle-1-handler {
    margin-left: 43%;
    background: #075f4e;
}
  input[name="chck1"]:checked + .toggle-1-trail .toggle-1-handler::before {
    content: "✔";
}

/*END OF TOGGLE1-------------------------------------------------------------------------------------------->*/
/*---------------------------------------------------------------------------------------------------------- */
/*START OF TOGGLE2------------------------------------------------------------------------------------------>*/

input[name="chck2"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
  
  .toggle-2-trail {
    margin-top: -10px;
    margin-left: -100px;
    display: flex;
    align-items: center;
    width: 40px;
    height: 26px;
    background: #2c3e50;
    border-radius: 2.5em;
    transition: all 0.5s ease;
    cursor: pointer;
}
  
  .toggle-2-handler {
    display: flex;
    margin-left: 3px;;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background: #1c2731;
    border-radius: 50%;
    transition: all 0.5s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
  .toggle-2-handler:before {
    content: "×";
    color: white;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
    margin-left: -1px;
}
  
  input[name="chck2"]:checked + .toggle-2-trail {
    background: #16a085;
}
  input[name="chck2"]:checked + .toggle-2-trail .toggle-2-handler {
    margin-left: 43%;
    background: #075f4e;
}
  input[name="chck2"]:checked + .toggle-2-trail .toggle-2-handler::before {
    content: "✔";
}

/*END OF TOGGLE2-------------------------------------------------------------------------------------------->*/
/*---------------------------------------------------------------------------------------------------------- */
/*START OF TOGGLE3------------------------------------------------------------------------------------------>*/

input[name="chck3"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
  
  .toggle-3-trail {
    margin-top: -10px;
    margin-left: -100px;
    display: flex;
    align-items: center;
    width: 40px;
    height: 26px;
    background: #2c3e50;
    border-radius: 2.5em;
    transition: all 0.5s ease;
    cursor: pointer;
}
  
  .toggle-3-handler {
    display: flex;
    margin-left: 3px;;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background: #1c2731;
    border-radius: 50%;
    transition: all 0.5s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
  .toggle-3-handler:before {
    content: "×";
    color: white;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
    margin-left: -1px;
}
  
  input[name="chck3"]:checked + .toggle-3-trail {
    background: #16a085;
}
  input[name="chck3"]:checked + .toggle-3-trail .toggle-3-handler {
    margin-left: 43%;
    background: #075f4e;
}
  input[name="chck3"]:checked + .toggle-3-trail .toggle-3-handler::before {
    content: "✔";
}

/*END OF TOGGLE3-------------------------------------------------------------------------------------------->*/
/*---------------------------------------------------------------------------------------------------------- */
/*START OF TOGGLE4------------------------------------------------------------------------------------------>*/

input[name="chck4"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
  
  .toggle-4-trail {
    margin-top: -150px;
    margin-left: -100px;
    display: flex;
    align-items: center;
    width: 40px;
    height: 26px;
    background: #2c3e50;
    border-radius: 2.5em;
    transition: all 0.5s ease;
    cursor: pointer;
}
  
  .toggle-4-handler {
    display: flex;
    margin-left: 3px;;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background: #1c2731;
    border-radius: 50%;
    transition: all 0.5s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
  .toggle-4-handler:before {
    content: "×";
    color: white;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
    margin-left: -1px;
}
  
  input[name="chck4"]:checked + .toggle-4-trail {
    background: #16a085;
}
  input[name="chck4"]:checked + .toggle-4-trail .toggle-4-handler {
    margin-left: 43%;
    background: #075f4e;
}
  input[name="chck4"]:checked + .toggle-4-trail .toggle-4-handler::before {
    content: "✔";
}

/*END OF TOGGLE4-------------------------------------------------------------------------------------------->*/
/*---------------------------------------------------------------------------------------------------------- */
/*START OF TOGGLE5------------------------------------------------------------------------------------------>*/

input[name="chck5"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
  
  .toggle-5-trail {
    margin-top: -150px;
    margin-left: -100px;
    display: flex;
    align-items: center;
    width: 40px;
    height: 26px;
    background: #2c3e50;
    border-radius: 2.5em;
    transition: all 0.5s ease;
    cursor: pointer;
}
  
  .toggle-5-handler {
    display: flex;
    margin-left: 3px;;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background: #1c2731;
    border-radius: 50%;
    transition: all 0.5s ease;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
  .toggle-5-handler:before {
    content: "×";
    color: white;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
    margin-left: -1px;
}
  
  input[name="chck5"]:checked + .toggle-5-trail {
    background: #16a085;
}
  input[name="chck5"]:checked + .toggle-5-trail .toggle-5-handler {
    margin-left: 43%;
    background: #075f4e;
}
  input[name="chck5"]:checked + .toggle-5-trail .toggle-5-handler::before {
    content: "✔";
}

1	komentarz 24 marca 2021 przez niezalogowany Niech da Pan kod

komentarz 24 marca 2021 przez Nearr Obywatel (1,890 p.)
przeniesione 25 marca 2021 przez Arkadiusz Waluk

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>.io</title>
    <meta name="description" content="" />
    <meta name="keywords" content="io, io games, games, website games, game, bubble game, buggle, circle, eating other players," />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="stylesheet" href="Fontello/css/fontello.css" type="text/css" />
    <link href="https://fonts.googleapis.com/css2?family=Lato&family=Ubuntu&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,500;0,600;1,700&display=swap" rel="stylesheet">
    <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
    <script src="plik.js"></script> 

</head>

<body onselectstart="return false;" oncontextmenu="return false">

    <div id="container">       
        <div id="main">           
            <div id="left"></div>

            <!--MAIN-->
            
            <div id="mid">

                <input type="text" name="Skin-URL" maxlength="40" placeholder="Skin URL" />
                <input type="text" name="Nickname" maxlength="20" placeholder="Nickname" />
                <input type="text" name="Tag" maxlength="20" placeholder="Tag" />

                <input type="button" name="buttonplay">
                    <i class="icon-play"></i>
                    <div class="play-ins">Play</div>
                </button></a>
                
                <input type="button" name="buttonspectate">
                    <i class="icon-eye"></i>
                </button></a>

                <!--RIGHT------>

            </div>
            <div id="right">

                <!--SETTINGS-->

                <div id="settings">
                    <div class="settings-ins">Settings</div>
                    

<!--CHECKBOX START-------------------------------------------------------------------------------------------->

                    <input id="chck1" name="chck1" type="checkbox">
                <label for="chck1" class="toggle-1-trail">
                <span class="toggle-1-handler"></span>
                </label>                

                <input id="chck2" name="chck2" type="checkbox">
                <label for="chck2" class="toggle-2-trail">
                <span class="toggle-2-handler"></span>
                </label>                

                <input id="chck3" name="chck3" type="checkbox">
                <label for="chck3" class="toggle-3-trail">
                <span class="toggle-3-handler"></span>
                </label>                

                <input id="chck4" name="chck4" type="checkbox">
                <label for="chck4" class="toggle-4-trail">
                <span class="toggle-4-handler"></span>
                </label>                

                <input id="chck5" name="chck5" type="checkbox">
                <label for="chck5" class="toggle-5-trail">
                <span class="toggle-5-handler"></span>
                </label>                
                </div>
                                  
<!--CHECKBOX END---------------------------------------------------------------------------------------------->

                <div id="profile">

                    <div class="loginins">Login with your Discord account to save your progress in game.</div>
                    <div style="clear:both;"></div>

                    <a href="https://discord.gg/76dhzvEFGy" target="_blank">
                        <div id="buttonlogin">
                            <div class="loginbuttonins">Login with your Discord account</div>
                        </div>
                   </a>

                </div>
            </div>
        </div>

             <!--SOCIALS-->

            <div id="socials">
                <a href="https://discord.gg/76dhzvEFGy" target="_blank"><div class="dc">
                    <i class="iconify" data-icon="fa-brands:discord"></i>
                                <div class="dc-ins">
                                    Official Discord
                                </div>
                </a>            
                
                <a href="https://www.youtube.com/channel/UCRjwCE_lmKW2lxToBQso66A" target="_blank"><div class="yt">
                    <i class="icon-youtube-play"></i>
                        <div class="yt-ins">
                                    YouTube
                        </div>
                </a>   
            </div>
    </div>
                <div style="clear:both;"></div> 
    </div>
</body>
</html>

Musiałem to wysłać w 2 wiadomościach, ponieważ css był za długi.

komentarz 25 marca 2021 przez niezalogowany

@Nearr,

Cytuję fragment regulaminu:

kod w małych ilościach należy wstawić przy użyciu specjalnego bloczka do tego przeznaczonego. W przypadku jego większych ilości, należy skorzystać z zewnętrznego serwisu hostującego tekst (np. gist.github.com, wklej.to, wklej.org, pastebin.com) i w treści pytania umieścić link; dozwolone jest również podanie linka do strony internetowej, której dotyczy problem oraz umieszczenie kodu w serwisie GitHub (lub podobnych) lub serwisach oferujących pogląd działania kodu online, typu jsfiddle.net czy codepen.io,

komentarz 25 marca 2021 przez Arkadiusz Waluk Ekspert (287,950 p.)

Akurat jeśli zmieściło się na forum, jest w bloczkach i ktoś tak woli, to też może być, tyle że dorzucenie kodu to nie powinna być odpowiedź - już przeniosłem do komentarza. Bloczek jest zwijany, więc tak wstawiony kod nie powinien sprawić problemu. Ale dzięki za czujność.

komentarz 25 marca 2021 przez niezalogowany

Aha, czyli CodePen ma jakieś ograniczenie i jeśli jest przekroczone to wtedy trzeba wstawić jakiegoś serwisu?

komentarz 25 marca 2021 przez Arkadiusz Waluk Ekspert (287,950 p.)

Nie wiem czy CodePen ma, chyba nie. Chodziło mi o to, że jeśli kodu faktycznie nie jest strasznie dużo i jest opakowany w bloczek, to można go wstawić na forum jeśli komuś wygodniej. Można też na CodePena, Gista lub inny serwis do wstawek kodu, jak kto woli.

1	komentarz 25 marca 2021 przez niezalogowany Rozumiem, dziękuję za odpowiedź.

2 odpowiedzi

odpowiedź 25 marca 2021 przez VBService Ekspert (253,100 p.)
edycja 25 marca 2021 przez VBService

Masz tam błąd składni html, dlatego :hover nie działa prawidłowo.

Numer linii: 34 - 37

<input type="button" name="buttonplay">
   <i class="icon-play"></i>
   <div class="play-ins">Play</div>
</button></a>

masz <input>, a próżniej znaczniki </button> i </a>, które wcześniej nie są "otwarte".

ten sam błąd, linia 39 - 41

<input type="button" name="buttonspectate">
   <i class="icon-eye"></i>
</button></a>

Propozycja poprawy:

<button type="button" name="buttonplay">
  <i class="icon-play"></i>
  <span class="play-ins">Play</span>
</button>

button[name="buttonplay"] {
  cursor: pointer;
}
button[name="buttonplay"]:hover {
  background-color: #175cb8;
  box-shadow: 0px 1px 3px #175cb8;
}

odpowiedź 24 marca 2021 przez ::{}:: Gaduła (3,890 p.)

Poszukałem troche na zagranicznym internecie i trafiłem na ten sposób. Jako że również nie do końca zrozumiałem, to tylko na to wpadłem.

komentarz 24 marca 2021 przez Nearr Obywatel (1,890 p.)

Chodzi mi o to, że gdy najadę, na napis "Play" albo fontello to nie pokazuje mi się łapka oraz kolor się nie zmienia. Wygląda to jakby napis oraz fontello blokowały buttona.

Czy może powinienem zrobić to za pomocą hiperłącza?
Robię grę internetową. Jak się kliknie Play menu główne znika i rozpoczyna się rozgrywka.

komentarz 24 marca 2021 przez ::{}:: Gaduła (3,890 p.)

hyperlink byłby chyba lepszym rozwiązaniem

komentarz 24 marca 2021 przez Nearr Obywatel (1,890 p.)

Tylko, że będzie trzeba specjalnie edytować hiperłącze?

komentarz 24 marca 2021 przez ::{}:: Gaduła (3,890 p.)

w jakim sensie "specjalnie edytować"?

komentarz 24 marca 2021 przez Nearr Obywatel (1,890 p.)

Jakbym zrobił to za pomocą buttona trzeba byłoby zrobić ackję w js.
A jak za pomoca hiperłącza trzeba by było się w linkowanie pobabwić.

komentarz 24 marca 2021 przez ::{}:: Gaduła (3,890 p.)

Jak tak bardzo chcesz ten przycisk to w js możesz sie pobawić ewentualnie możesz zrobić index.html jako to menu i np. gra.html gdzie będzie cała gra, byłby po prostu w ten sposób: