Buttons navbar background (hover), help!

[Manuel94]

Originally Posted by nerbert

I was wrong about needing JavaScript. I thought you would need to change the styling for the <li> but you only need to change styling for the <a>. But I can not find the right css for changing the <a> styling.

I do not know what to say. I need to know the code to use to do this ... Nothing more.

[Lynne]

.navtabs li a.navtab:hover {background: whatever-you-want;}

[nerbert]

I understand now. I was confused because my custom style does not change tab background colors.

So, what you want is the FORUM tab to be normal when you hover over the MERCATINO or ARTICOLI tab?

This will need JavaScript because when you are on the forum page the FORUM tab is different because it has class = "selected" and the other tabs do not. When you hover over the MERCATINO tab it changes because of the styling for a:hover. If you want the FORUM tab to be normal you have to remove class = "selected", and the only way to do that is with JavaScript. Then when you are not hovering over any tab you must replace class = "selected" in the FORUM tab.

I think I can have this working in a few hours.

--------------- Added [DATE]1362774620[/DATE] at [TIME]1362774620[/TIME] ---------------

Try pasting this in at the bottom of the navbar template:

<script>
	function hover(event) {
        	eventTarget = is_ie ? event.srcElement : event.target ;
                if(eventTarget.parentNode.parentNode == navtabs && /a/i.test(eventTarget.tagName)) selected.removeAttribute('class');
                else selected.setAttribute('class', 'selected')
        }
                
        // Find the selected tab
        var navtabs = fetch_object('navtabs');
        var test = navtabs.getElementsByTagName('li');
        for(var i=0;i<test.length;i++) if (test[i].className == 'selected') var selected = test[i];
        
        // Create event listener
        var above_body = document.getElementsByTagName('body')[0].getElementsByTagName('div')[0];
        if (above_body.addEventListener) above_body.addEventListener("mousemove", hover, true);
        else if (above_body.attachEvent) above_body.attachEvent("onmousemove", hover);
</script>

The links below the tabs shift around when I hover over any of the tabs. I don't know why. I will try to find out why later.

[Manuel94]

Originally Posted by nerbert

I understand now. I was confused because my custom style does not change tab background colors.

So, what you want is the FORUM tab to be normal when you hover over the MERCATINO or ARTICOLI tab?

This will need JavaScript because when you are on the forum page the FORUM tab is different because it has class = "selected" and the other tabs do not. When you hover over the MERCATINO tab it changes because of the styling for a:hover. If you want the FORUM tab to be normal you have to remove class = "selected", and the only way to do that is with JavaScript. Then when you are not hovering over any tab you must replace class = "selected" in the FORUM tab.

I think I can have this working in a few hours.

--------------- Added [DATE]1362774620[/DATE] at [TIME]1362774620[/TIME] ---------------

Try pasting this in at the bottom of the navbar template:

<script>
	function hover(event) {
        	eventTarget = is_ie ? event.srcElement : event.target ;
                if(eventTarget.parentNode.parentNode == navtabs && /a/i.test(eventTarget.tagName)) selected.removeAttribute('class');
                else selected.setAttribute('class', 'selected')
        }
                
        // Find the selected tab
        var navtabs = fetch_object('navtabs');
        var test = navtabs.getElementsByTagName('li');
        for(var i=0;i<test.length;i++) if (test[i].className == 'selected') var selected = test[i];
        
        // Create event listener
        var above_body = document.getElementsByTagName('body')[0].getElementsByTagName('div')[0];
        if (above_body.addEventListener) above_body.addEventListener("mousemove", hover, true);
        else if (above_body.attachEvent) above_body.attachEvent("onmousemove", hover);
</script>

The links below the tabs shift around when I hover over any of the tabs. I don't know why. I will try to find out why later.

Hello, thanks for your help but I solved otherwise. It was that simple. Wandering around a bit for additional.css I discovered that just add the line:. Navtabs li.selected a.navtab {
background: .. / ... / etc ...
Thanks anyway for your help.