[HTML][CSS] Problem to change color while mouseover on buttons

[[GER]Loading...]

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

[Chev]

Hello, @[GER]Loading...

 

Are you trying to make all of the buttons (when hovered over) that brighter orange?

 

Regards, Chev.

[[GER]Loading...]

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;}

 

[Spirit Omega Wolf]

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.

[Chev]

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.

[[GER]Loading...]

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

[Chev]

^ I saw that.. I'm trying to find the issue with the code.

[[GER]Loading...]

^

Thanks men <3 

[Chev]

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.

 

[[GER]Loading...]

I reject .body:hover

But now comes this ^

[Chev]

^ I just fixed that issue.

https://jsfiddle.net/fjoqaooh/38/

[[GER]Loading...]

^

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

[Chev]

^ 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.

[[GER]Loading...]

^

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...

[Chev]

^ Do you want these gone or the same color as the menu?

http://prntscr.com/d9dqe1

[[GER]Loading...]

^

Gone

[Chev]

^

Like this? https://jsfiddle.net/fjoqaooh/69/

[[GER]Loading...]

^

(poor thread )

Give me some minutes to explain you, wait i want to do (I'll edit this comment)

[Chev]

^ If you want to have the background the same colors as the hover buttons.. you will need to do some coding.

[[GER]Loading...]

^

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)

[Chev]

^ I gotcha now.. I will try some things and hopefully it will work out.

[[GER]Loading...]

^

I didn't think this will work, right ?  

[Chev]

@[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.

[[GER]Loading...]

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  

[Spirit Omega Wolf]

@[GER]Loading... Sorry mate. I tried everything I could think of including Javascript. Just doesn't seem like is possible.