jquery. Как сделать наложение фона на блоки?

12
R
На сайте с 03.08.2012
Offline
131
2315

Добрый вечер! Мне нужно чтобы при направлении, на блок налаживался фон. (какбудто он выделяется).

Пока пришла идея такая:

При наведении добавлять <div> блок в конец элемента.

У этого див блока position:absolute; ширина, высота такая же как и у того на который нужно наложить, ну и соответственно фон полупрозрачный с нужным цветом.

Это сделать удалось легко, создается такой же по размерам блок..

Но как его ровно наложить на другой?

Попытался наложить с помощью offset()

Т.е. узнал top и left у блока на который нужно наложить и добавил их блоку-фону.

На половине элементов работает нормально, а на половине сьезжает это фон очень сильно. Например сьезжает над блоками у которых маргин с отрицательным значением...

Помогите разобраться, как сделать лучше этот фон? Максимально кроссбраузерно.

Спасибо!

SocFishing
На сайте с 26.09.2013
Offline
118
#1

Думаю примерно понятно. Или вместо фона игра стилей и полу прозрачности.

<div id="test2" style="background-color:green;width:200px;height:200px" onmouseover="$('#test2').css('background-color', 'red');" onmouseout="$('#test2').css('background-color', 'green');">searchengines.guru</div>
<div id="test" style="background-image:url('http://img.forumimg.net/design/forum-header-inside.png');width:200px;height:200px" onmouseover="$('#test').css('background-image', 'url(http://img.forumimg.net/design/forum-header-inside.png)');" onmouseout="$('#test').css('background-image', 'url(http://socfishing.ru/wp-content/uploads/2014/02/sflogo_min.png)');">searchengines.guru</div>

примеры с jQuery.

★Сервис идентифицирует (https://socfishing.com/?utm_source=searchengines) посетителей вашего сайта и предоставляет их профили ВКонтакте, Телефон, Почта! Цены копеечные, работаем 8 лет.
R
На сайте с 03.08.2012
Offline
131
#2

Ваш способ заменяет только лишь фон, и допустим если на фоне была картинка то она вообще пропадет. А мне нужен тот же эффект opacity, только с цветом и максимально кроссбраузерно.

Т.е. opacity просто изменяет прозрачность, а мне нужно сверху наложить полупрозрачный фон например голубого цвета.

Чтобы было как "просмотр кода элемента", когда в браузере просмотривашь код там тоже выделяется, так же и мне нужно.

При этом там выделяются и картинки и все подобное (не только div), мне тоже самое нужно. Подскажите...

maldivec
На сайте с 04.11.2008
Offline
160
#3

Я мож не понял что надо, ибо с выражением мыслей у вас как-то не очень ))

Но может быть вам это надо - http://codepen.io/bazhenov/pen/rwEob ? Зачем вам js и координаты какие-то ))

SocFishing
На сайте с 26.09.2013
Offline
118
#4

revered, тогда как уже было сказано второй полупрозрачный див сверху.

пример изменения стиля на css

<style>
#test2 {
-webkit-transition: all 1s ease-in; /*для браузеров с webkit*/
-moz-transition: all 1s ease-in /*для FF*/
-o-transition: all 1s ease-in /*для Opera*/
transition: all 1s ease-in /*для браузеров с нормальной поддержкой свойства (всегда должен стоять последним)*/
}
#test2:hover {
opacity: 0.5;
background-image:none !important;
background-color:blue !important;
}
</style>
<div id="test2" style="background-color:green;background-image:url('http://img.forumimg.net/design/forum-header-inside.png');width:200px;height:200px" >searchengines.guru</div>

наверное, без второго дива не обойтись

maldivec
На сайте с 04.11.2008
Offline
160
#5

Советчики радуют ))) 😂

SocFishing
На сайте с 26.09.2013
Offline
118
#6

Если я верно понял что как-то так

<style>
#test2 {
-webkit-transition: all 1s ease-in; /*для браузеров с webkit*/
-moz-transition: all 1s ease-in /*для FF*/
-o-transition: all 1s ease-in /*для Opera*/
transition: all 1s ease-in /*для браузеров с нормальной поддержкой свойства (всегда должен стоять последним)*/
}
#test2:hover {
opacity: 0.5;
background-color:blue !important;
}
</style>
<div id="test3" style="width:200px;height:200px;background-image:url('http://img.forumimg.net/design/forum-header-inside.png');"><div id="test2" style="background-image:url('http://socfishing.ru/wp-content/uploads/2014/02/sflogo_min.png');background-color:green;width:200px;height:200px;" >searchengines.guru</div></div>

http://jsfiddle.net/h9dGP/

R
На сайте с 03.08.2012
Offline
131
#7
maldivec:
Я мож не понял что надо, ибо с выражением мыслей у вас как-то не очень ))

Но может быть вам это надо - http://codepen.io/bazhenov/pen/rwEob ? Зачем вам js и координаты какие-то ))

Да то что надо:) А я то уже 2 часа на JS пытаюсь написать))) Спасибо!

SocFishing
На сайте с 26.09.2013
Offline
118
#8
revered:
Да то что надо:) А я то уже 2 часа на JS пытаюсь написать))) Спасибо!

Ну капец. При этом примере фон сменится же. Ладно - ок. ;)

maldivec
На сайте с 04.11.2008
Offline
160
#9
SocFishing:
Ну капец. При этом примере фон сменится же. Ладно - ок.

Что и где сменится? :)

SocFishing
На сайте с 26.09.2013
Offline
118
#10
maldivec:
Что и где сменится? :)

все верно. мой косяк. 🙄

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий