Помогите разобраться с кодом.
Проблема в том что при наведении курсора (к примеру) на слово
Apple, акивность курсора становится не только на слове
Apple, но и по всей горизонтали с права от этих слов.
Как здесь правильно поправить что бы линьк и a:hover работали конкретно на словах
Apple,
Samsung,
SonyТест сайт
HTML:
<div class="list_links">
<a href="https://pr-cy.ru/jump/?url=http%3A%2F%2Fkompcenter.net.ua%2F%3Fpage_id%3D2">
<div class="div1"></div>
</a><a href="https://pr-cy.ru/jump/?url=http%3A%2F%2Fkompcenter.net.ua%2F%3Fpage_id%3D5">
<div class="div2"></div>
</a>
<a href="https://pr-cy.ru/jump/?url=http%3A%2F%2Fkompcenter.net.ua%2F%3Fpage_id%3D7">
<div class="div3"></div>
</a>
<a href="https://pr-cy.ru/jump/?url=http%3A%2F%2Fkompcenter.net.ua%2F%3Fpage_id%3D9">
<div class="div4"></div>
</a>
</div>
CSS:
.list_links .div1 {
display: block;
position: relative;
left: 110px;
top: 25px;
width: 180px;
height: 65px;
}
.list_links a .div1 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
display: block;
text-indent: -9999px;
}
.list_links a:hover .div1 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://kompcenter.net.ua/images/doska_menu_ege.gif");
background-origin: padding-box;
background-position: left top;
background-repeat: no-repeat;
background-size: auto auto;
}
.list_links .div2 {
display: block;
position: relative;
left: 55px;
top: 20px;
width: 240px;
height: 65px;
}
.list_links a .div2 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
display: block;
}
.list_links a:hover .div2 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://kompcenter.net.ua/images/doska_menu_ege.gif");
background-origin: padding-box;
background-position: 53px top;
background-repeat: no-repeat;
background-size: auto auto;
}
.list_links .div3 {
display: block;
left: 110px;
position: relative;
top: 15px;
width: 180px;
height: 65px;
}
.list_links a .div3 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
display: block;
}
.list_links a:hover .div3 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://kompcenter.net.ua/images/doska_menu_ege.gif");
background-origin: padding-box;
background-position: left top;
background-repeat: no-repeat;
background-size: auto auto;
}
div#widget_doska установите
width: 475px;
456
У
div.widget ul, div.textwidget поставить
- width: 179px;
- padding-left: 110px;
И все будет нормальноwidth: 179px;
padding-left: 110px;