Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
18 / 18 / 3
Регистрация: 25.01.2013
Сообщений: 330
1

ПОМОГИТЕ С :HOVER

27.08.2013, 16:30. Показов 670. Ответов 2
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Вот код левого выпадающего меню, http://gogas1.tmweb.ru/ , проблема в этой строке #main #page div.left ul.catalog_menu li:hover > a, если убрать знак >, то у главного меню загорается hover как нужно, но бэк гроунд у подменю становится такоже го цвета, а hover у подменю работает нормально, подскажите как мне сделать hover состщяние у главных пунктов, что бы оно не было бэкграундом у под пунктов в неактивном состоянии????
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
#main #page div.left ul.catalog_menu, #main #page div.left ul.catalog_menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #main #page div.left ul.catalog_menu {
        display: inline-block;  
      margin: 0 0 0 1;
    width: 228px;
    /*  background-color: #111;
        background-image: -moz-linear-gradient(#444, #111); 
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));    
        background-image: -webkit-linear-gradient(#444, #111);  
        background-image: -o-linear-gradient(#444, #111);
        background-image: -ms-linear-gradient(#444, #111);
        background-image: linear-gradient(#444, #111); */
        /*-moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;  */
        -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; 
  
    }
    
    #main #page div.left ul.catalog_menu:before,
    #main #page div.left ul.catalog_menu:after {
        content: "";
        display: table;
    
    }
    
    #main #page div.left ul.catalog_menu:after {
        clear: both;
    
    }
    
    #main #page div.left ul.catalog_menu {
        zoom:1;
    
    }
    
    #main #page div.left ul.catalog_menu li {
    display: block;
    width: 230px; 
    float: left;  
    /*  border-right: 1px solid #222;
        -moz-box-shadow: 1px 0 0 #444;
        -webkit-box-shadow: 1px 0 0 #444;
        box-shadow: 1px 0 0 #444;  */
        position: relative;
    
    }
    
    #main #page div.left ul.catalog_menu a {
        float: left;
        padding: 12px 30px; 
        color: #999;
        text-transform: uppercase;
        font: bold 12px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000; 
    
    
    }
    
    #main #page div.left ul.catalog_menu li:hover > a  {
        color: #fafafa; 
    background: -moz-linear-gradient(top, #f8cb08, #e79e1a); /* Firefox 3.6+ */
    /* Chrome 1-9, Safari 4-5 */
    background: -webkit-gradient(linear, left top, left bottom, 
                color-stop(0%,#f8cb08), color-stop(100%,#e79e1a));
    /* Chrome 10+, Safari 5.1+ */
    background: -webkit-linear-gradient(top, #f8cb08, #e79e1a);
    background: -o-linear-gradient(top, #f8cb08, #e79e1a); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f8cb08, #e79e1a); /* IE10 */
    background: linear-gradient(top, #f8cb08, #e79e1a); /* CSS3 */ 
    }
    
    *html #main #page div.left ul.catalog_menu li a:hover { /* Только для IE6 */
        color: #fafafa;  
    }
    
    #main #page div.left ul.catalog_menu ul {
        margin: 20px 0 0 0;
        _margin: 0; 
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 0px;
        left: 200px;
        z-index: 9999;    
        background: #444;
        background: -moz-linear-gradient(#444, #111);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
        background: -webkit-linear-gradient(#444, #111);    
        background: -o-linear-gradient(#444, #111); 
        background: -ms-linear-gradient(#444, #111);    
        background: linear-gradient(#444, #111);
    
        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;  
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;    
    }
 
    #main #page div.left ul.catalog_menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;  
    }
    
    #main #page div.left ul.catalog_menu ul ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin: 0; /*Только для IE6*/
        -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        box-shadow: -1px 0 0 rgba(255,255,255,.3);      
    }
    
    #main #page div.left ul.catalog_menu ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*Только для IE6  */
        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;  
    }
    
    #main #page div.left ul.catalog_menu ul li:last-child {   
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;    
    }
    
    #main #page div.left ul.catalog_menu ul a {    
        padding: 10px;
    /*  width: 230px; */
        _height: 10px; /*Только для IE6*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
    }
    
    #main #page div.left ul.catalog_menu ul a:hover {
        background-color: #0186ba;
        background-image: -moz-linear-gradient(#04acec,  #0186ba);  
        background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background-image: -webkit-linear-gradient(#04acec, #0186ba);
        background-image: -o-linear-gradient(#04acec, #0186ba);
        background-image: -ms-linear-gradient(#04acec, #0186ba);
        background-image: linear-gradient(#04acec, #0186ba);  
    }
    
    #main #page div.left ul.catalog_menu ul li:first-child > a {
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0; 
    }
    
    #main #page div.left ul.catalog_menu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 0px;
        top: 0px;
    border-top: 5px solid transparent;
    border-right: 10px solid #444;
    border-bottom: 5px solid transparent;  
    }
    
    #main #page div.left ul.catalog_menu ul ul li:first-child a:after {
        left: -6px;
        top: 50%;
        margin-top: -6px;
        border-left: 0; 
        /*border-bottom: 6px solid transparent;
        border-top: 6px solid transparent; 
    border-right: 10px solid #3b3b3b;   */
  }
    
    #main #page div.left ul.catalog_menu ul li:first-child a:hover:after {
    /*  border-bottom-color: #04acec;   */
    border-top: 5px solid transparent;
    border-right: 10px solid #04acec;
    border-bottom: 5px solid transparent; 
    }
    
    #main #page div.left ul.catalog_menu ul ul li:first-child a:hover:after {
        border-right-color: #0299d3; 
        border-bottom-color: transparent;   
    }
    
    #main #page div.left ul.catalog_menu ul li:last-child > a {
        -moz-border-radius: 0 0 3px 3px;
        -webkit-border-radius: 0 0 3px 3px;
        border-radius: 0 0 3px 3px;
    }
XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet SYSTEM "ulang://i18n/constants.dtd:file">
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:umi="http://www.umi-cms.ru/TR/umi">
 
   
    <xsl:template match="udata[@method = 'getCategoryList']" mode="left-column">
     
        <ul class="catalog_menu" umi:button-position="bottom left"
            umi:element-id="{@category-id}" umi:region="list" umi:module="catalog" umi:sortable="sortable">
            <xsl:apply-templates select="//item" mode="left-column" />
        </ul>
    
    </xsl:template>
 
 
    <xsl:template match="udata[@method = 'getCategoryList']//item" mode="left-column">
  
        <li umi:element-id="{@id}" umi:region="row">
            <span>
                <a href="{@link}" umi:field-name="name" umi:delete="delete" umi:empty="&empty-section-name;">
                    <xsl:value-of select="." />
                </a>
            </span>
            <xsl:apply-templates select="document(concat('udata://catalog/getCategoryList/void/', @id, '//1/'))" />
        </li>
    
    </xsl:template>
   
</xsl:stylesheet>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
27.08.2013, 16:30
Ответы с готовыми решениями:

CSS (hover) отменить действие последнего hover на все элементы
Всем доброго времени суток. У меня следующая загвоздка: нашел скрипт для выпадающих меню. Подогнал...

Нужно при клике, исключить события hover, во. И еще глюки .hover. Отключение .hover в случае активации .click
Нужно при клике, исключить события hover, во. И 1. Глюки .hover: При наведении на блок, к...

Hover в IE
В IE hover отображается коряво Как это можно исправить?

:hover в IE
Вот такой вопрос: Не работают все стили с псевдоклассом :hover в IE, причём во всех версиях, а не...

2
269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
27.08.2013, 18:23 2
блин, до конца не дочитал, но вроде как нужно сделать так: у тех пунктов, которым нужен фон, допишите в существующий класс через пробел, класс, допустим active и потом в css пропишите class(тоесть имя класса).active{ тут действие}
0
18 / 18 / 3
Регистрация: 25.01.2013
Сообщений: 330
27.08.2013, 19:05  [ТС] 3
спасибо, решил проблему немного другим способом, просто дописал,
CSS
1
2
3
4
5
#main #page div.left ul.catalog_menu li:hover   {
     background-image: url(/templates/cat.png);
   width: 234px;
   border:none;
    }
вот только теперь проблема в border, в hover состоянии border:none; , а в обычном стоит подчёркивание, и когда наводишь то на 1 пиксель всё подпрыгивает, а если поставить бордер в hover то он у меня вылезает за границы.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
#main #page div.left ul.catalog_menu, #main #page div.left ul.catalog_menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #main #page div.left ul.catalog_menu {
  
        display: inline-block;  
      margin: 0 0 0 1;
    width: 230px;
    /*  background-color: #111;
        background-image: -moz-linear-gradient(#444, #111); 
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));    
        background-image: -webkit-linear-gradient(#444, #111);  
        background-image: -o-linear-gradient(#444, #111);
        background-image: -ms-linear-gradient(#444, #111);
        background-image: linear-gradient(#444, #111); */
        /*-moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;  */
        -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; 
  
    }
    
    #main #page div.left ul.catalog_menu:before,
    #main #page div.left ul.catalog_menu:after {
        content: "";
        display: table;
    
    
    }
    
    #main #page div.left ul.catalog_menu:after {
        clear: both;
    
    }
    
    #main #page div.left ul.catalog_menu {
        zoom:1;
    
    }
    
    #main #page div.left ul.catalog_menu li {
    display: block;
    width: 230px; 
    float: left;  
    /*  border-right: 1px solid #222;
        -moz-box-shadow: 1px 0 0 #444;
        -webkit-box-shadow: 1px 0 0 #444;
        box-shadow: 1px 0 0 #444;  */
        position: relative;
    border-bottom: 1px solid #cecece;
    
    }
    
    #main #page div.left ul.catalog_menu a {
        float: left;
        padding: 9px 30px; 
        color: #999;
        text-transform: uppercase;
        font: bold 12px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000; 
    
   
    }
    
    #main #page div.left ul.catalog_menu li:hover   {
     background-image: url(/templates/cat.png);
   width: 234px;
   border:none;
    
    }
  
    
  
  #main #page div.left ul.catalog_menu li:hover a {
        color: #fff; 
   
    
    }
    
    *html #main #page div.left ul.catalog_menu li a:hover { /* Только для IE6 */
        color: #fafafa;  
    }
    
    #main #page div.left ul.catalog_menu ul {
        margin: 20px 0 0 0;
        _margin: 0; 
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 0px;
        left: 250px;
        z-index: 9999;    
        background: #444;
        background: -moz-linear-gradient(#444, #111);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
        background: -webkit-linear-gradient(#444, #111);    
        background: -o-linear-gradient(#444, #111); 
        background: -ms-linear-gradient(#444, #111);    
        background: linear-gradient(#444, #111);  
    
        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;  
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;    
    }
 
    #main #page div.left ul.catalog_menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;  
    }
    
    #main #page div.left ul.catalog_menu ul ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin: 0; /*Только для IE6*/
        -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        box-shadow: -1px 0 0 rgba(255,255,255,.3);      
    }
    
    #main #page div.left ul.catalog_menu ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*Только для IE6  */
        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;  
    }
    
    #main #page div.left ul.catalog_menu ul li:last-child {   
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;    
    }
    
    #main #page div.left ul.catalog_menu ul a {    
        padding: 10px;
    /*  width: 230px; */
        _height: 10px; /*Только для IE6*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
    }
    
    #main #page div.left ul.catalog_menu ul a:hover {
        background-color: #0186ba;
        background-image: -moz-linear-gradient(#04acec,  #0186ba);  
        background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background-image: -webkit-linear-gradient(#04acec, #0186ba);
        background-image: -o-linear-gradient(#04acec, #0186ba);
        background-image: -ms-linear-gradient(#04acec, #0186ba);
        background-image: linear-gradient(#04acec, #0186ba);  
    }
    
    #main #page div.left ul.catalog_menu ul li:first-child > a {
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0; 
    }
    
    #main #page div.left ul.catalog_menu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: -10px;
        top: 10px;
    border-top: 5px solid transparent;
    border-right: 10px solid #444;
    border-bottom: 5px solid transparent;  
    }
    
    #main #page div.left ul.catalog_menu ul ul li:first-child a:after {
        left: -6px;
        top: 50%;
        margin-top: -6px;
        border-left: 0; 
        /*border-bottom: 6px solid transparent;
        border-top: 6px solid transparent; 
    border-right: 10px solid #3b3b3b;   */
  }
    
    #main #page div.left ul.catalog_menu ul li:first-child a:hover:after {
    /*  border-bottom-color: #04acec;   */
    border-top: 5px solid transparent;
    border-right: 10px solid #04acec;
    border-bottom: 5px solid transparent; 
    }
    
    #main #page div.left ul.catalog_menu ul ul li:first-child a:hover:after {
        border-right-color: #0299d3; 
        border-bottom-color: transparent;   
    }
    
    #main #page div.left ul.catalog_menu ul li:last-child > a {
        -moz-border-radius: 0 0 3px 3px;
        -webkit-border-radius: 0 0 3px 3px;
        border-radius: 0 0 3px 3px;
    }
0
27.08.2013, 19:05
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.08.2013, 19:05
Помогаю со студенческими работами здесь

Hover
Здравствуйте. Как сделать hover как тут: http://faridos.com/test На верхних иконках. Кружочек при...

A:hover
Не срабатывает, что делать? /*Цвет ссылки при наведении на неё мышки*/...

Hover эффект
Есть вот такой кусок кода https://jsfiddle.net/destroer18/zyat0pz2/, когда картинка отъезжает в...

Hover и кнопки
Подскажите пожалуйста как сделать такой вот ховер?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru