Эффект при наведении мыши на картинки товара

[Miker]

Всем привет, парни такой вопрос у меня на шаблоне предусмотрена такая фишка - при наведении на картинку товара она выделяется, тоесть появляется рамка, но вот проблема, это отображается только в эксплорере IE8 в режиме совместимости, а в опере и в мазиле эффекта такого нет, подскажите где копать, какой скрипт мучить? спс

[palcet]

Открой файл стилей и в добавь в класс отвечающий за вывод изображений (Я не знаю какой у вас шаблон, но додопустим, что этот класс называется image), чтобы при наведении на изображение оно было в рамке (твечает за это слово hover а за рамку отвечает строка border-top: 1px solid #EEEEEE строка opacity: 0.8; позволяет немного затемнить изображение при наведении на него.

.image img:hover {

opacity: 0.8;

border-top: 1px solid #EEEEEE;

}

В общем пробуй меняй файл стилей.

[Miker]

Спасибо, получилось)

[Fizik87]

Открой файл стилей и в добавь в класс отвечающий за вывод изображений (Я не знаю какой у вас шаблон, но додопустим, что этот класс называется image), чтобы при наведении на изображение оно было в рамке (твечает за это слово hover а за рамку отвечает строка border-top: 1px solid #EEEEEE строка opacity: 0.8; позволяет немного затемнить изображение при наведении на него.

В общем пробуй меняй файл стилей.

Псевдо свойвство HOVER не очень хорошо работает в применении его к тегам! Я для этого теги помещаю в ссылку (<a rel="nofollow">) и даю ей стиль curdor:text; Во-первый, этот варинат полностью кросбраузерный! Во-вторых, никак не влияет на ввалидность страницы!

[Miker]

Мой CSS, помогите сделать чтоб работало, выше когда писал работало только в эксплорере и только в режиме совместимости, спс

/* CSS Document */

* {

color:#34376a;

}

html, body {

margin: 0px;

padding: 0px;

text-align: center;

}

html {

overflow: -moz-scrollbars-vertical;

background: #828fed url('../image2/background.jpg') center top no-repeat;

}

body, td, th, input, textarea, select, a {

font-size: 14px;

}

h1, h2, h3 {

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

font-weight:bold;

padding: 0px 20px;

}

h1 {

font-size: 20px;

}

h2 {

font-size: 18px;

}

h3 {

font-size: 16px;

}

.text_bold {

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

font-weight:bold;

text-align: center;

font size: 18px;

margin-bottom: 20 px;

}

form {

padding: 0px;

margin: 0px;

display: inline;

}

input, textarea, select {

margin: 5px;

}

p {

padding: 0px 20px;

}

a, a:visited, a:hover, a:active {

text-decoration: none;

}

a:link, a:visited {

color: #34376a;

cursor: pointer;

}

a:hover {

color: #fff;

}

a:active {

color: #fff;

font-weight:bolder;

}

ul {

margin: 0px;

padding-left: 40px;

}

li {

list-style: url('../image2/list.png');

padding-bottom: 5px;

}

li:hover {

list-style: url('../image2/list_act.png');

}

img {

border-color: #31386e;

border: 2px;

}

a: img {

border-color: #31386e;

border: 2px;

}

a:hover img {

border-color: #ede182;

border: 2px;

}

/* Пустые слои */

#float_left {

float: left;

}

#float_right {

float: right;

}

#empty {

clear: both;

margin-bottom: -30px;

}

#clear_both: {

float: left;

clear: both;

}

/* layout */

#header, #container {

width: 1024px;

margin: 0 auto;

text-align: left;

}

#header {

height: 240px;

}

#header .htext {

text-align: center;

font-family: Georrgia, "Times New Roman", Times, sans-serif;

font-size: 23px;

padding: 20px 0px 0px 45px;

font-weight:bold;

}

#header img {

border: 0px;

}

#header .logo {

padding-top: 25px;

padding-left: 10px;

}

#header_menu .menu {

float: left;

height: 30px;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

}

#header_menu .menu a {

float: left;

width: 120px;

height: 30px;

background: url('../image2/menu.png') no-repeat;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

padding-top: 5px;

text-align: center;

color: #31386e;

text-decoration: none;

font-size: 14px;

font-weight: bold;

position: relative;

z-index: 1;

}

#header_menu .menu a.selected {

background: url('../image2/menu_sel.png') no-repeat;

color: #FFF;

text-shadow: 1px 1px 0 #31386e;

z-index: 2;

}

#header_menu .menu a:hover {

background: url('../image2/menu_sel.png') no-repeat;

color: #ede182;

}

#header_menu .menu2 {

float: right;

clear: right;

font-size: 13px;

}

#header_menu .menu2 a {

height: 30px;

margin-right: 10px;

padding-left: 20px;

background-repeat: no-repeat;

background-position: left center;

font-weight: bold;

font-size: 13px;

}

#header_menu .menu2 a:hover {

color: #ede182;

}

#header_menu .line {

clear:both;

width: 1024px;

height: 5px;

background: url('../image2/line.png') repeat-y;

font-size: 13px;

}

#header_menu .menu_nav {

clear: both;

}

#header_menu .menu_nav .left {

background: url('../image2/base_left.png') no-repeat;

width: 40px;

height: 30px;

float: left;

}

#header_menu .menu_nav .right {

background: url('../image2/base_right.png') no-repeat;

width: 40px;

height: 30px;

float: right;

}

#header_menu .menu_nav .center {

background: url('../image2/base_center.png') repeat-x;

height: 30px;

margin-left: 40px;

margin-right: 40px;

}

#header_menu .navigator {

float: left;

padding-top: 5px;

}

#header_menu .floater {

float: left;

}

#nik {

text-align: left;

margin-left: 20px;

padding: 5px; 10px; 5px;

color: #fff;

font-weight: bold;

float: left;

}

#floater2 {

padding-top: 5px;

float: right;

}

#breadcrumb {

float: left;

padding-top: 7px;

height: 13px;

}

#content {

margin: 5px 195px 0px 195px;

width: 634px;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

font-weight: 500;

}

#content .top {

color: #fff;

}

#content .top .left {

background: url('../image2/base2_left.png') no-repeat;

width: 40px;

height: 30px;

float: left;

}

#content .top .right {

background: url('../image2/base2_right.png') no-repeat;

width: 40px;

height: 30px;

float: right;

}

#content .top .center {

background: url('../image2/base2_center.png') repeat-x;

height: 30px;

margin-left: 40px;

margin-right: 40px;

text-align: center;

}

#content .top h1, .heading {

padding: 5px;

font-size: 14px;

color: fff;

}

#content h1, .heading {

color: #31386e;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

font-weight: bold;

text-transform: uppercase;

margin: 0px;

}

#content .middle {

font-family: Georrgia, "Times New Roman", Times, sans-serif;

background: #fff url('../image2/content_middle.png') repeat-y;

min-height: 30px;

padding: 10px;

}

#content .middle a:hover {

color: #ede182;

}

#content .middle a:active {

color: #ede182;

font-weight:bolder;

}

#content .bottom {

background: #fff url('../image2/content_down.png') no-repeat;

height: 15px;

margin-bottom: 5px;

}

#content .middle .box {

float: left;

margin: 0px 5px;

min-height: 30px;

}

#content .middle .box .middle {

min-height: 30px;

}

#footer {

width: 100%;

height: 70px;

clear: both;

background: url('../image2/footer_menu.png') top no-repeat;

text-align: center;

}

#footer .footer_menu a {

width: 120px;

height: 30px;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

padding: 5px 10px;

color: #31386e;

text-decoration: underline;

font-size: 14px;

font-weight: bold;

}

#footer .footer_menu a:hover {

color: #ede182;

}

#column_left {

float: left;

width: 190px;

margin-top: 5px;

clear: left;

}

#column_right {

float: right;

width: 190px;

margin-top: 5px;

clear: right;

}

.box {

width: 190px;

margin-bottom: 5px;

background: url('../image2/box_up2.png') 0px 30px no-repeat;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

}

.box .top {

height: 30px;

background: url('../image2/box_name.png') no-repeat;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

color: #fff;

font-size: 14px;

text-transform: uppercase;

font-weight: bold;

text-align: center;

padding-top: 5px;

}

.box .middle {

background: url('../image2/box_center.png') repeat-y;

margin-top: 10px;

padding: 0px 10px;

min-height: 30px;

}

.box .middle .contacts {

margin: -4px -10px -14px -10px;

}

.box .middle .contacts .text {

font-weight: bold;

}

.box .bottom {

height: 15px;

background: url('../image2/box_down.png') no-repeat;

}

.box .bottom2 {

height: 15px;

background: url('../image2/box_down2.png') no-repeat;

}

/* Таблица товара*/

.tabs {

height: 30px;

margin: 0px 10px;

font-size: 14px;

}

.tabs a {

cursor: pointer;

float: left;

display: block;

width: 120px;

height: 30px;

background: #b4bcf4 url('../image2/menu.png') no-repeat;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

padding-top: 5px;

text-align: center;

font-weight: bold;

color: #31386e;

z-index: 2;

}

.tabs a.selected {

background: #b4bcf4 url('../image2/menu_sel.png') no-repeat;

width: 120px;

height: 30px;

color: #FFF;

font-weight: bold;

z-index: 4;

}

.tabs .colors a {

background-color: #ede182;

height: 25px;

text-decoration: blink;

}

.tab_page {

border: 5px solid #b4bcf4;

background: #fff;

float: left;

width: 574px;

padding: 5px;

margin: -5px 10px;

font-family: Georrgia, "Times New Roman", Times, sans-serif;

display: block;

z-index: 3;

}

.success {

padding: 5px;

margin: 0px 15px 5px 15px;

background: #ede182;

border: 1px ridge #b4bcf4;

font-size: 14px;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

text-align: center;

}

.warning {

padding: 5px;

margin: 0px 15px 5px 15px;

background: #ede182;

border: 1px ridge #b4bcf4;

font-size: 14px;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

text-align: center;

}

.wait {

padding: 5px;

margin: 0px 15px 5px 15px;

background: #ede182;

border: 1px ridge #b4bcf4;

font-size: 14px;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

text-align: center;

}

.required {

color: #ee0340;

font-weight: bold;

}

.error {

padding: 5px;

margin: 0px 15px 5px 15px;

background: #ee0340;

color: #fff;

border: 1px ridge #b4bcf4;

font-size: 14px;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

text-align: center;

display: block;

}

.help {

cursor: pointer;

}

.tooltip {

border: 1px ridge #b4bcf4;

background: #ede182;

padding: 5px;

font-size: 14px;

width: 250px;

}

.clear { /* generic container (i.e. div) for floating buttons */

overflow: hidden;

width: 100%;

}

.button {

padding-left: 8px;

display: inline-block;

margin: 5px;

background: url('../image2/button_left.png') top left no-repeat;

text-decoration: none;

font-weight: bold;

}

.button span {

cursor: pointer;

display: block;

padding: 0px 12px 5px 5px;

background: url('../image2/button_right.png') top right no-repeat;

color:#31386e;

font-family: Georrgia, "Times New Roman", Times, sans-serif;

}

.buttons {

padding: 5px;

}

.buttons input {

padding: 0px;

margin: 0px;

}

.buttons table {

width: 100%;

border-collapse: collapse;

}

.buttons table td {

vertical-align: middle;

}

.content {

margin: 0px 10px;

}

/*Список товаров в категории*/

.list {

width: 100%;

}

.list p {

margin: 0px -10px 0px -10px;

}

.list td {

text-align: center;

vertical-align: top;

}

.description {

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

color:#34376a;

text-align: justify;

font-size: 14px;

}

/*Поле сортировки*/

.sort {

margin: 10px 0px;

height: 30px;

width: 100%;

background: url('../image2/content_line.png') no-repeat;

font-weight:bold;

}

.sort .div1 {

float: right;

margin-left: 5px;

padding-top: 5px;

padding-right: 10px;

}

.sort .div2 {

padding-top: 5px;

font-family: Georrgia, "Times New Roman", Times, sans-serif;

text-align: right;

}

.sort select {

margin: 0;

padding: 0;

}

#category ul {

margin: 0px 0px -10px 8px;

padding-top: 5px;

padding-left: 12px;

font-weight:bold;

}

#information ul {

margin: 0px 0px -10px 8px;

margin-bottom: 0px;

padding-left: 14px;

font-size: 14px;

color:#fff;

font-weight:bold;

font-family: Georrgia, "Times New Roman", Times, sans-serif;

}

#information li: {

height: 30px;

}

.loginform {

padding: 0px 20px;

}

.cart {

width: 100%;

margin-bottom: 10px;

}

.cart th {

text-align: center;

padding: 10px;

font-weight: bold;

border: 1px ridge #828fed;

text-align: center;

}

.cart td {

padding: 5px;

border: 1px ridge #828fed;

text-align: center;

}

#module_cart .middle {

}

.cart_module_total {

padding: 0px;

font-size: 14px;

color: #fff;

font-weight: bold;

text-align:right;

}

.cart_remove {

margin-top: 3px;

background: url('../image2/list_remove_btn.png') no-repeat left center transparent;

padding-right:10px;

cursor:pointer;

}

.cart_remove_loading {

margin-top: 3px;

background: url('../image2/ajax_load.gif') no-repeat transparent;

padding-right:10px;

}

.button_add_small, a.button_add_small:visited {

margin-top: 3px;

padding: 10px;

background: url('../image2/busket.png') no-repeat left center transparent;

text-decoration: none;

cursor:pointer;

}

/*Личный кабинет*/

#content .kabinet {

float: left;

font-weight: bold;

width: 250px;

text-align:left;

margin: 10px 20px 20px 20px;

vertical-align: middle;

}

/*Меню*/

.mcont { /*Весь контейнер меню*/

display:block;

width: 190px;

margin: 5px -10px -10px -10px;

color: #31386e;

font-weight: bold;

font-family: Georrgia, "Times New Roman", Times, sans-serif;

}

.menu_head { /*Категория*/

cursor: pointer;

width: 190px;

height: 30px;

background: url('../image2/box_content.png') no-repeat;

padding: 5px 0px;

margin-top: 0px;

margin-bottom: -10px;

text-align: center;

}

.menu_body { /*Подкатегория*/

display:none;

width: 190px;

text-align: left;

}

.menu_body a {

display:block;

}

.menu_body .menu_list a {

background: url(../image2/box_list2.png) no-repeat;

height: 30px;

padding: 5px 10px 5px 40px;

}

.menu_body .menu_list a:hover {

color:#fff;

height: 30px;

padding-left: 50px;

background: url(../image2/box_list_act2.png) no-repeat;

}

.menu_prise_conteiner { /*Прайс-лист*/

width: 190px;

margin: 0px -10px 0px -10px;

font-size: 13px;

font-weight: bolder;

font-family: Georrgia, "Times New Roman", Times, sans-serif;

}

.menu_prise {

height: 30px;

width: 190px;

padding: 5px 0px;

cursor: pointer;

text-align: center;

color: #ede182;

background: url('../image2/box_content.png') no-repeat;

margin-top: 10px;

margin-bottom: -10px;

}

.menu_prise a {

color: #ede182;

}

.menu_prise a:hover {

color: #fff;

}

.menu_new {

height: 30px;

width: 190px;

padding: 5px 0px;

cursor: pointer;

text-align: center;

color: #ee0340;

background: url('../image2/box_content2.png') no-repeat;

margin-top: 10px;

margin-bottom: -10px;

}

.menu_new a {

color: #ee0340;

}

.menu_new a:hover {

color: #fff;

}

.mod_special { /*Акции*/

height: 30px;

width: 190px;

padding: 5px 0px;

cursor: pointer;

text-align: center;

color: #ede182;

font-size: 13px;

font-weight: bolder;

background: url('../image2/box_content.png') no-repeat;

margin: 0px -10px -10px -10px;

}

.mod_special a {

color: #ede182;

}

.mod_special a:hover {

color: #fff;

}

/*Название товара*/

.product_name {

color: #31386e;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

font-size: 14px;

padding-left: 10px;

font-weight: bold;

}

/*Название товара в модуле*/

.mod_product_name {

color: #31386e;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

font-size: 12px;

padding-left: 10px;

}

/*Артикул*/

.article {

color: #31386e;

font-size: 12px;

padding-left: 10px;

font-family: Georrgia, "Times New Roman", Times, sans-serif;

}

/*Цена*/

.price {

color: #31386e;

font-size: 14px;

font-weight: bold;

padding-left: 10px;

float: left;

text-align: center;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

}

/*Старая цена*/

.old_price {

color: #31386e;

font-size: 12px;

font-weight: bold;

padding-left: 10px;

text-decoration:line-through;

float: left;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

}

/*Специальная цена*/

.new_price {

float: left;

clear: right;

padding-left: 10px;

color: #ee0340;

font-size: 14px;

font-weight: bold;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

}

.new_price2 {

float: left;

clear: right;

padding-left: 10px;

color: #fff;

font-size: 14px;

font-weight: bold;

font-family: "Myriad Pro", Arial, Helvetica, sans-serif;

}

/*Оценка*/

.stars {

padding-left: 10px;

margin-bottom: -20px;

}

/*Страница товара*/

#product_picture {

float: left;

width: 40%;

margin: 10px;

}

#product_left {

float: left;

font-weight: bolder;

width: 25%;

overflow-x: visible;

position: relative;

}

#product_right {

float: left;

font-weight: bold;

width: 30%;

}

#product_else {

float: left;

width: 100%;

margin: 20px;

}

/* Перелистывание списка */

.pagination {

display: inline-block;

width: 100%;

margin-bottom: -10px;

background: url('../image2/content_line.png') no-repeat;

}

.pagination .links, .pagination .results {

padding: 5px 10px;

height: 30px;

}

.pagination .links {

float: left;

}

.pagination .links a {

padding: 4px 7px;

text-decoration: underline;

color: 828fed;

}

.pagination .links b {

padding: 4px 7px;

}

.pagination .results {

float: right;

color: fff;

}

.pagination .pages {

background: url('../image2/pagination_links.png') no-repeat;

width: 30px;

height: 30px;

}

/* Список товара в документе "Товарная накладная" */

.docTN table {

border: 5px solid #828fed;

margin: 10px 0px;

padding: 10px;

}

.docTN tr {

border: 1px solid #828fed;

}

.docTN th {

valign: top;

border: 1px solid #828fed;

}

#fancybox-left span {

left: 20px;

}

#fancybox-right span {

left: auto;

right: 20px;

}