All geek questions in one place

CSS: link binding does not work in Chrome and Safari

I came across this free website design template that has some links above. In hover mode, the link text and background should change color according to CSS. It works in Firefox, Opera and IE, but there are no changes in Chrome 17.0.963.79 and Safari 5.1.2, so I suspect that there is a problem with webkit. But CSS looks pretty harmless. Where is the problem here? The CSS part for this guidance is as follows:

.topNaviagationLink a:hover { text-align:center; border-bottom:none; color:#0C61C9; display: block; width:121px; height: 35px; line-height: 35px; background-image:url(tab.png); }
+4
source share
3 answers

It is interesting...

It works, would it be acceptable?

 .topNaviagationLink:hover a { text-align:center; border-bottom:none; color:#0C61C9; display: block; width:121px; height: 35px; line-height: 35px; background-image:url(tab.png); }
+4
source

This is due to the display setting: block only on hover. Adding a display: locking anchors from get go fixes the problem, however it changes the display a bit.

 .topNaviagationLink a { display:block; text-align:center; }

Remove negative stock from .topNaviagationLink. It will look a little different, but it works much better (hover targets are where you would expect, etc.).

+4
source

The <a> tag is an inline element, so when you hover over the <a> tag, the background image is not displayed. Change the <a> elements to display: block; and have the same width / height as the background image, and it will work fine.

Also, as Matthew Darnell said, add text-align: center; and remove the negative fields.

+1
source

Source: https://habr.com/ru/post/1401244/

More articles:


All Articles