При наведении на текст нужно чтобы фон окрашивался

@Miracle_1 · Регистрация: 21.04.2014

Author24 — интернет-сервис помощи студентам

Добрый день, нужно сделать два одинаковых прямоугольника со скругленными краями и внутри написать текст. При наведении на этот текст нужно чтобы фон окрашивался. Я смог добиться того, что фон окрашивается как только мышь поступает в это поле. Нужно немного переделать код.

CSS

.ramka { 
font-size: 45px; 
line-height: 90px; 
cursor: pointer; 
margin: 20px; 
width: 190px; 
height: 90px; 
border-radius: 30px; 
border: 10px double #808080; 
text-align: center; 
position: relative; 
color: #000 
} 
 
.ramka.d:hover {
background: #ffff00; 
color: #000; 
}

HTML5

1	<center><div class="ramka d">æ</div></center>

Скрин: [del]
Название: 2017-09-29_14-36-19.png
Просмотров: 55

Размер: 4.1 Кб

@andyyy · 29.09.2017, 15:11

CSS

.ramka { 
font-size: 45px; 
line-height: 90px; 
cursor: pointer; 
margin: 20px; 
width: 190px; 
height: 90px; 
border-radius: 30px; 
border: 10px double #808080; 
text-align: center; 
position: relative; 
color: #000 
} 
 
.ramka.d:hover {
background: #ffff00; 
color: #000; 
}

HTML5

1
2
3

<center><div class="ramka d">TEXT 1</div></center>
<br>
<center><div class="ramka d">TEXT 2</div></center>

@Miracle_1 · 29.09.2017, 16:07 **[ТС]**

Нет, мне нужно чтобы при наведении на текст рамка окрашивалась, а не при наведении на рамку саму.

@Pashkanin · 29.09.2017, 18:27

попробуй создать 2 стиля и объявить их через onmouseover и onmousemove, примерно так

HTML5

1	<p class="class1" onmousemove="this.class='class1'" onmouseover="this.class='class2'"></p>

@andyyy · 29.09.2017, 19:03

я тока так знаю на css ))

CSS

.text {
    
font-size: 45px; 
position: absolute; top: 9%; left: 6%;
z-index: 1;
cursor: pointer;    
    
}
 
.text:hover + .ramka{
   background: blue;
}
 
 
 
.ramka { 
 
margin: 20px; 
width: 190px; 
height: 90px; 
border-radius: 30px; 
border: 10px double #808080; 
 
position: relative; 
color: #000 
}

HTML5

<div class="">
                <div class="text">
                  
            Главная
                  
                </div>
                <div class="ramka"></div>
            </div>

@Miracle_1 · 29.09.2017, 20:09 **[ТС]**

andyyy, все классно, только как сделать чтобы текст был закреплен внутри рамки, а то он смещен от рамы.

@andyyy · 29.09.2017, 23:12

top: 9%; left: 6%; с этим поиграйтесь

top - отступ сверху-
left - с левого угла
right - правый
bottom - с низа

@Miracle_1 0 / 0 / 0 Регистрация: 21.04.2014 Сообщений: 80
	29.09.2017, 16:07 [ТС]	3
	Нет, мне нужно чтобы при наведении на текст рамка окрашивалась, а не при наведении на рамку саму. 0

@Miracle_1 0 / 0 / 0 Регистрация: 21.04.2014 Сообщений: 80
	29.09.2017, 20:09 [ТС]	6
	andyyy, все классно, только как сделать чтобы текст был закреплен внутри рамки, а то он смещен от рамы. 0

@andyyy 767 / 323 / 157 Регистрация: 26.05.2016 Сообщений: 2,127
	29.09.2017, 23:12	7
	`top: 9%; left: 6%;` с этим поиграйтесь top - отступ сверху- left - с левого угла right - правый bottom - с низа 0