Добавяне на hover

ceko · 18 Март 2011

Искам да добавя черен hover на линковете. Отдавна се мъча но не успявам да го направя. Ето ми кода за менюто в css ...

Код:

.topmenu { 
        font-family: Verdana, Tahoma, Arial, helvetica, serif; 
	font-size: 12px; 
	font-weight: bold;
	height: 22px; 
	color:#FFFFFF; 
	background: #2C2923 url('images/panels.png') repeat-x;
	padding:0px 4px 1px 7px;
}

.topmenu {
color:#FFFFFF;
height:22px;
text-align:center;
}

.topmenu ul {
margin:0;
padding:0;
background-color:#373536;
padding-top:3px;
height:22px;
border:1px solid #FFFFFF;
border-left:0;
border-right:0;
background:url('images/panels.png') repeat-x;
}

.topmenu li {
display:inline;
list-style-type:none;
border-right:1px solid #FFFFFF;
}

.topmenu a:link, .topmenu a:visited {
color:#FFFFFF;
padding:3px 5px;
font:bold 11px Verdana, Arial, Helvetica, sans-serif;
}

.topmenu a:hover {
color:#000;
background-color:#FFFFFF;

background:url(images/bg_navigation_hover.gif) repeat-x;
}

Nazi_93 · 18 Март 2011

.topmenu a:link {тук стиловете}
.topmenu a:active {тук стиловете}
.topmenu a:visited {тук стиловете}
.topmenu a:hover {тук стиловете}

ceko · 18 Март 2011

Някой по-компетентен ?

tedo96 · 18 Март 2011

[css]
.topmenu a:hover {
color:#000;
background-color:#FFFFFF;

background:url(images/bg_navigation_hover.gif) repeat-x;
}
[/css] Нали си го направил?
Пробвай така:
[css]
.topmenu a:hover {
color:#000;
background-color:#FFFFFF;
}
[/css]

shterev · 18 Март 2011

Просто проблема ти е,че се мъчиш на ховер да сложиш картинка, а тагът <a> не е блоков елемент, т.е. при ховер трябва да добавиш width , height

tedo96 · 18 Март 2011

shterev каза:
Просто проблема ти е,че се мъчиш на ховер да сложиш картинка, а тагът <a> не е блоков елемент, т.е. при ховер трябва да добавиш width , height

или да ползва .topmenu :hover

ceko · 18 Март 2011

Въпроса ми е как без да махам картинката, която ползвам за hover да добавя и черен hover, на линковете в менюто.

tedo96 · 18 Март 2011

[css].topmenu {
font-family: Verdana, Tahoma, Arial, helvetica, serif;
font-size: 12px;
font-weight: bold;
height: 22px;
color:#FFFFFF;
background: #2C2923 url('images/panels.png') repeat-x;
padding:0px 4px 1px 7px;
}

.topmenu {
color:#FFFFFF;
height:22px;
text-align:center;
}

.topmenu ul {
margin:0;
padding:0;
background-color:#373536;
padding-top:3px;
height:22px;
border:1px solid #FFFFFF;
border-left:0;
border-right:0;
background:url('images/panels.png') repeat-x;
}

.topmenu li {
display:inline;
list-style-type:none;
border-right:1px solid #FFFFFF;
}

.topmenu a:link, .topmenu a:visited {
color:#FFFFFF;
padding:3px 5px;
font:bold 11px Verdana, Arial, Helvetica, sans-serif;
}

.topmenu a:hover {
color:#000;
background-color:#FFFFFF;
}
.topmenu :hover {
background:url(images/bg_navigation_hover.gif) repeat-x;
}

[/css]

shterev · 18 Март 2011

ceko каза:
Въпроса ми е как без да махам картинката, която ползвам за hover да добавя и черен hover, на линковете в менюто.

Какъв е тоя черния ховер, я обясни нарисувай, дай демо, че да ти отговорим. Аз лично не мога да те разбера какъв е тоя черния хивер, както си го казал в коментара по горе

ceko · 18 Март 2011

tedo96 каза:
[css].topmenu {
font-family: Verdana, Tahoma, Arial, helvetica, serif;
font-size: 12px;
font-weight: bold;
height: 22px;
color:#FFFFFF;
background: #2C2923 url('images/panels.png') repeat-x;
padding:0px 4px 1px 7px;
}

.topmenu {
color:#FFFFFF;
height:22px;
text-align:center;
}

.topmenu ul {
margin:0;
padding:0;
background-color:#373536;
padding-top:3px;
height:22px;
border:1px solid #FFFFFF;
border-left:0;
border-right:0;
background:url('images/panels.png') repeat-x;
}

.topmenu li {
display:inline;
list-style-type:none;
border-right:1px solid #FFFFFF;
}

.topmenu a:link, .topmenu a:visited {
color:#FFFFFF;
padding:3px 5px;
font:bold 11px Verdana, Arial, Helvetica, sans-serif;
}

.topmenu a:hover {
color:#000;
background-color:#FFFFFF;
}
.topmenu :hover {
background:url(images/bg_navigation_hover.gif) repeat-x;
}

[/css]

С тоя код не става. Други предложения ? :?

shterev · 18 Март 2011

е как искаш да стане с етоя код, като псевдо класа е сложен на никаде?

.topmenu :hover това не е правилно, може би е имал предвид .topmenu:hover , ама аз ти казах да обясниш по ясно какво искаш

ceko · 18 Март 2011

shterev каза:
ceko каза:

Въпроса ми е как без да махам картинката, която ползвам за hover да добавя и черен hover, на линковете в менюто.

Увеличете...

Какъв е тоя черния ховер, я обясни нарисувай, дай демо, че да ти отговорим. Аз лично не мога да те разбера какъв е тоя черния хивер, както си го казал в коментара по горе

Ето виж: http://prikachi.com/images/164/3107164x.jpg
Посочил съм с мишката към начало. Искам като го посоча текста "начало" да става черен. Надявам се да е станало ясно вече.

tedo96 · 18 Март 2011

Така? :idea:
[css].topmenu {
font-family: Verdana, Tahoma, Arial, helvetica, serif;
font-size: 12px;
font-weight: bold;
height: 22px;
color:#FFFFFF;
background: #2C2923 url('images/panels.png') repeat-x;
padding:0px 4px 1px 7px;
}

.topmenu {
color:#FFFFFF;
height:22px;
text-align:center;
}

.topmenu ul {
margin:0;
padding:0;
background-color:#373536;
padding-top:3px;
height:22px;
border:1px solid #FFFFFF;
border-left:0;
border-right:0;
background:url('images/panels.png') repeat-x;
}

.topmenu li {
display:inline;
list-style-type:none;
border-right:1px solid #FFFFFF;
}

.topmenu a:link, .topmenu a:visited {
color:#FFFFFF;
padding:3px 5px;
font:bold 11px Verdana, Arial, Helvetica, sans-serif;
}

.topmenu a:hover {
color:#000;
background-color:#FFFFFF;
}
.topmenu:hover {
background:url(images/bg_navigation_hover.gif) repeat-x;
}
[/css]

shterev · 18 Март 2011

точно така се прави:

HTML:

a:hover{
 color:#000;

}

както си го направил, но защо не ти сработва вече не занм(не съм писал кода). Погледни дали нямаш зададено от някой друг елемент това а

Я пробвай .topmenu a:link, .topmenu a:visited {
да стане на .topmenu a

ceko · 18 Март 2011

tedo96 каза:
Така? :idea:
[css].topmenu {
font-family: Verdana, Tahoma, Arial, helvetica, serif;
font-size: 12px;
font-weight: bold;
height: 22px;
color:#FFFFFF;
background: #2C2923 url('images/panels.png') repeat-x;
padding:0px 4px 1px 7px;
}

.topmenu {
color:#FFFFFF;
height:22px;
text-align:center;
}

.topmenu ul {
margin:0;
padding:0;
background-color:#373536;
padding-top:3px;
height:22px;
border:1px solid #FFFFFF;
border-left:0;
border-right:0;
background:url('images/panels.png') repeat-x;
}

.topmenu li {
display:inline;
list-style-type:none;
border-right:1px solid #FFFFFF;
}

.topmenu a:link, .topmenu a:visited {
color:#FFFFFF;
padding:3px 5px;
font:bold 11px Verdana, Arial, Helvetica, sans-serif;
}

.topmenu a:hover {
color:#000;
background-color:#FFFFFF;
}
.topmenu:hover {
background:url(images/bg_navigation_hover.gif) repeat-x;
}
[/css]

Ето резултата: http://prikachi.com/images/246/3107246G.jpg

ceko · 18 Март 2011

shterev каза:
точно така се прави:

HTML:

a:hover{ color:#000; }

както си го направил, но защо не ти сработва вече не занм(не съм писал кода). Погледни дали нямаш зададено от някой друг елемент това а

Я пробвай .topmenu a:link, .topmenu a:visited {
да стане на .topmenu a

Какво искаш да кажеш, да махна .topmenu a:link, .topmenu a:visited { ?

tedo96 · 18 Март 2011

[css].topmenu {
font-family: Verdana, Tahoma, Arial, helvetica, serif;
font-size: 12px;
font-weight: bold;
height: 22px;
color:#FFFFFF;
background: #2C2923 url('images/panels.png') repeat-x;
padding:0px 4px 1px 7px;
}

.topmenu {
color:#FFFFFF;
height:22px;
text-align:center;
}

.topmenu ul {
margin:0;
padding:0;
background-color:#373536;
padding-top:3px;
height:22px;
border:1px solid #FFFFFF;
border-left:0;
border-right:0;
background:url('images/panels.png') repeat-x;
}

.topmenu li {
display:inline;
list-style-type:none;
border-right:1px solid #FFFFFF;
}

.topmenu a:link, .topmenu a:visited {
color:#FFFFFF;
padding:3px 5px;
font:bold 11px Verdana, Arial, Helvetica, sans-serif;
}

.topmenu a:hover {
color:#000;
}
.topmenu:hover {
background:url(images/bg_navigation_hover.gif) repeat-x;
}
[/css]

shterev · 18 Март 2011

като те гледам сървара е твой, я направо дай линк да видя

Нямах предвид да махнеш .topmenu a.link и т.н. , а да стане просто .topmenu a{ код}

dashe · 18 Март 2011

[css].topmenu li a { text-decoration: none; }
.topmenu li a:hover { text-decoration: underline; color: #000; }
[/css]

ceko · 18 Март 2011

Сайта е на платен хостинг, просто качих снимката на локалния ми хостинг за по бързо...

Добавяне на hover

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered