[GER]Loading... Posted November 19, 2016 Share Posted November 19, 2016 (edited) Hello guys I have a little problem to change the color while my mouse is over a button. My test site in GIF When my mouse is over "About me" appears the color "orange" (hexcode : #F5AB35) and I want, that all have the color #FDE3A7 (brighter orange). Let me show it with a image : Like this (translate it in english) : First part of image : So should it look Second : Here is the button orange, the background, buttons and behind the button should have the same color who have color button. Third : Same but just in red. I have already asked 2 friends of me but they can't help me. You can edit/check it HERE if you know, what i did wrong Sry for my bad english, I hoped you can understand me kind regarts Loading Edited November 19, 2016 by [GER]Loading... Wrong link -> Edit Link to comment Share on other sites More sharing options...
Chev Posted November 19, 2016 Share Posted November 19, 2016 Hello, @[GER]Loading... Are you trying to make all of the buttons (when hovered over) that brighter orange? Regards, Chev. Have a question? Feel free to message me. Feedback | Rules | Support | News | Meet the Team Link to comment Share on other sites More sharing options...
[GER]Loading... Posted November 19, 2016 Author Share Posted November 19, 2016 Should i change my main color for it or how @Chev? --- CSS buttons and hover effect .btn_index { background-color: #6C7A89; color: black; width: 14.3%; height: 100%; font-size: 15px; font-family: cursive; border: 0px; padding: 0px; margin: auto; margin-left: -5px; -webkit-transition: 0.5s; } .btn_index:hover { background-color: black; -webkit-transition: 0.2s; margin-top: -100px; } Here is the code when i mouse hover, over the buttons /* Mouseover color btn */ .menu .btn_index:first-child:hover {background-color: #1E824C;} .menu .btn_index:nth-child(2):hover {background-color: #F5AB35;} .menu .btn_index:nth-child(3):hover {background-color: #D64541;} .menu .btn_index:nth-child(4):hover {background-color: #1F3A93;} .menu .btn_index:nth-child(5):hover {background-color: #1F3A93;} .menu .btn_index:nth-child(6):hover {background-color: #1F3A93;} .menu .btn_index:nth-child(7):hover {background-color: #1F3A93;} Link to comment Share on other sites More sharing options...
Spirit Omega Wolf Posted November 19, 2016 Share Posted November 19, 2016 I'm going through it now. The issue is that the background-color is changing when you hover over the whole menu. Finding a solution now. Link to comment Share on other sites More sharing options...
Chev Posted November 19, 2016 Share Posted November 19, 2016 Alright, I managed to get the hover-able button color working. https://jsfiddle.net/fjoqaooh/7/ Regards, Chev. Edit: trying to fix the background problem now. Have a question? Feel free to message me. Feedback | Rules | Support | News | Meet the Team Link to comment Share on other sites More sharing options...
[GER]Loading... Posted November 19, 2016 Author Share Posted November 19, 2016 5 minutes ago, Chev said: Alright, I managed to get the hover-able button color working. https://jsfiddle.net/fjoqaooh/7/ Regards, Chev. Edit: trying to fix the background problem now. I wan't this with color but the background won't change with it :/ that's my problem Link to comment Share on other sites More sharing options...
Chev Posted November 19, 2016 Share Posted November 19, 2016 ^ I saw that.. I'm trying to find the issue with the code. Have a question? Feel free to message me. Feedback | Rules | Support | News | Meet the Team Link to comment Share on other sites More sharing options...
[GER]Loading... Posted November 19, 2016 Author Share Posted November 19, 2016 ^ Thanks men <3 Link to comment Share on other sites More sharing options...
Chev Posted November 19, 2016 Share Posted November 19, 2016 I got it working. This code is controlling that background color.. http://prntscr.com/d9d9xb Have a look for yourself. https://jsfiddle.net/fjoqaooh/25/ - Chev. Have a question? Feel free to message me. Feedback | Rules | Support | News | Meet the Team Link to comment Share on other sites More sharing options...
[GER]Loading... Posted November 19, 2016 Author Share Posted November 19, 2016 I reject .body:hover But now comes this ^ Link to comment Share on other sites More sharing options...
Chev Posted November 19, 2016 Share Posted November 19, 2016 ^ I just fixed that issue. https://jsfiddle.net/fjoqaooh/38/ 1 Have a question? Feel free to message me. Feedback | Rules | Support | News | Meet the Team Link to comment Share on other sites More sharing options...
[GER]Loading... Posted November 19, 2016 Author Share Posted November 19, 2016 ^ That's look nice but i want this with color Home button : dark green -> background brighter green About me : dark orange -> background brighter orange etc ^^ Just this is my big problem to fix it Link to comment Share on other sites More sharing options...
Chev Posted November 19, 2016 Share Posted November 19, 2016 ^ https://jsfiddle.net/fjoqaooh/51/ Now, correct me if I'm wrong here.. Do you want to have each hover display as the background color also? - Chev. Have a question? Feel free to message me. Feedback | Rules | Support | News | Meet the Team Link to comment Share on other sites More sharing options...
[GER]Loading... Posted November 19, 2016 Author Share Posted November 19, 2016 (edited) ^ Correct and by the class ".menu" (behind the button the bar) too for the same color and this is my problem what i have to fix it :/ /edit By the background and .menu I want the color brighter as the main color as possible. /edit 2 Like THIS but colored by the buttons Edited November 19, 2016 by [GER]Loading... Link to comment Share on other sites More sharing options...
Chev Posted November 19, 2016 Share Posted November 19, 2016 ^ Do you want these gone or the same color as the menu? http://prntscr.com/d9dqe1 Have a question? Feel free to message me. Feedback | Rules | Support | News | Meet the Team Link to comment Share on other sites More sharing options...
[GER]Loading... Posted November 19, 2016 Author Share Posted November 19, 2016 ^ Gone Link to comment Share on other sites More sharing options...
Chev Posted November 19, 2016 Share Posted November 19, 2016 ^ Like this? https://jsfiddle.net/fjoqaooh/69/ Have a question? Feel free to message me. Feedback | Rules | Support | News | Meet the Team Link to comment Share on other sites More sharing options...
[GER]Loading... Posted November 19, 2016 Author Share Posted November 19, 2016 ^ (poor thread ) Give me some minutes to explain you, wait i want to do (I'll edit this comment) Link to comment Share on other sites More sharing options...
Chev Posted November 19, 2016 Share Posted November 19, 2016 ^ If you want to have the background the same colors as the hover buttons.. you will need to do some coding. Have a question? Feel free to message me. Feedback | Rules | Support | News | Meet the Team Link to comment Share on other sites More sharing options...
[GER]Loading... Posted November 19, 2016 Author Share Posted November 19, 2016 ^ as example like this : (Edited by paint) The 2 boxes left and right of the bar is the .menu div and below of the 2 boxes is the .body (background color) Link to comment Share on other sites More sharing options...
Chev Posted November 19, 2016 Share Posted November 19, 2016 ^ I gotcha now.. I will try some things and hopefully it will work out. Have a question? Feel free to message me. Feedback | Rules | Support | News | Meet the Team Link to comment Share on other sites More sharing options...
[GER]Loading... Posted November 19, 2016 Author Share Posted November 19, 2016 ^ I didn't think this will work, right ? Link to comment Share on other sites More sharing options...
Chev Posted November 19, 2016 Share Posted November 19, 2016 @[GER]Loading... I've tried finding some ways to do what you seek but, I can not manage to get it to work. Hopefully, someone will reply who knows the way to do it. Sorry that I could not assist with this issue.. but, if you need anything else.. please ask me. Regards, Chev. Have a question? Feel free to message me. Feedback | Rules | Support | News | Meet the Team Link to comment Share on other sites More sharing options...
[GER]Loading... Posted November 19, 2016 Author Share Posted November 19, 2016 No problem :x Sound difficult, sry Maybe i try to ask an web dev :x but I wait of @Spirit_Wolf, maybe he found a solution Link to comment Share on other sites More sharing options...
Spirit Omega Wolf Posted November 20, 2016 Share Posted November 20, 2016 @[GER]Loading... Sorry mate. I tried everything I could think of including Javascript. Just doesn't seem like is possible. Link to comment Share on other sites More sharing options...
Recommended Posts