Question

Прописал стиль "hover"  для блока " Меню сайта".При навождении на "меню сайта" выделяется весь блок, как сделать, чтобы только элементы выделялись, а блок оставался на месте? Как например у категори "Друзья Сайта"

Если я пропишу стиль display: block; для "меню сайта"  значёк ссылки все равно появляется только после того как я наведу на саму ссылку какого либо подраздела "меню сайта", как исправить?

Прописал стиль "hover" для "Категории раздела". Как сделать чтобы в "Категории раздела" при навождении выделялся не весь блок, а отдельный элемент? и  если я ему прописываю стиль display: block; работает не корректно, тоесть выделяется весь блок как ссылка. как исправить? помогите разобратся я совсем запутался с этими класами .catName

Answer 1

Ознакомьтесь с материалом - стильное оформление категорий

Comments

cпасиииииибо))

---

если прописываю display: block; для catName у меня текст на след строку переносится

---

для  "меню сайта" тоже прописан стиль display: block; , но при наведении на блок мышка не меняется

---

Вы как вижу особо и не применили стили с ответа выше.
В таблице стилей у вас должны быть следующие стили:
.catDescr {display:none;}
.catNumData {display:none;}
.catName {
text-align: center;
font-size: 11px;
padding: 5px 10px 6px;
margin: 2px 0px 0px 2px;
color: #fff !important;
display: block;
text-decoration: none;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25);
border-radius: 3px;
background: rgb(39, 158, 95);
}
.catName:hover {background:red;}
 
.catNameActive {
 text-align: center;
font-size: 11px;
font-style: italic;
color: #807B7B !important;
}
a.catNameActive {
text-align: center;
font-size: 11px;
padding: 5px 10px 6px;
margin: 2px 0px 0px 2px;
color: #fff !important;
display: block;
text-decoration: none;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25);
border-radius: 3px;
background: rgb(214, 59, 20);
}

.catName {
font-size:13px;
line-height:31px;
color: #BCBBBB;
width: 164px;
height:30px
}

Смена цвета при наведении на категорию прописана вот здесь:
.catName:hover {background:red;}
я по умолчанию для примера задал красный цвет, вы меняйте под себя.

Так же подредактировал ширину и высоту блока категорий:
.catName {
font-size:13px;
line-height:31px;
color: #BCBBBB;
width: 164px;
height:30px
}

Применяйте стили практикуйтесь и меняйте.

---

а если сначала навести на ссылку категории "меню сайта" и затем обратно на блок этой категории то display: block; действует

---

самым простым выходом будет просто прописать следующие стили для категории:
.catsTd:hover{
 box-shadow: 0 0 10px rgba(0,0,0,0.8);
 width: 195px;
}