Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Замена background таблицы, по наведении на ячейку (https://javascript.ru/forum/misc/59679-zamena-background-tablicy-po-navedenii-na-yachejjku.html)

DENERIK 22.11.2015 12:45
Замена background таблицы, по наведении на ячейку
 
Как заменить background таблицы, по наведении на её ячейку ?

Вот конкретный пример :

Хочу чтобы фон картинки менялся, по наведении на ниже расположенные цвета :

Mess4me 22.11.2015 12:49
DENERIK,
как пример только с картинкой на бакграунде
<!DOCTYPE HTML>
<html>

<head>
 
    <meta charset="utf-8">
    <style>
        #but {
            width: 40px;
            height: 40px;
            background: url("http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png") no-repeat;
            background-size: 40px 40px;
            cursor: pointer;
        }
       #but:hover {
            background: url("http://i.stack.imgur.com/vfLae.png") no-repeat;
            background-size: 40px 40px;
        }

    </style>
</head>

<body>

<div id="but"> </div>
 

</body>

</html>

DENERIK 22.11.2015 12:52
Mess4me,
Эх, я бы тоже хотел по проще, но не прокатит.

Должно быть именно, по наведении курсора мыши на ячейку.
Там 3 цвета должно быть. А ни 1.

И просто растянуть div по наведении на него курсора, тоже не пойдёт. Так как растянутый div, будет перекрывать другие цвета.

рони 22.11.2015 13:19
DENERIK,
картинку с прозрачным фоном и html можно?

DENERIK 22.11.2015 13:44
Цитата:
Сообщение от рони (Сообщение 397119)
DENERIK,
картинку с прозрачным фоном и html можно?

ССЫЛКА (HTML, CSS, изображение)

рони 22.11.2015 14:27
DENERIK,
вариант
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <style type='text/css'>
    .b224 {
background: rgba(50, 50, 50, 1);
}
.b225, .b225:hover ~ img {  left:0%;
background: rgba(255, 255, 255, 1);
}
.b226, .b226:hover ~ img {  left:33%;
background: rgba(127, 127, 127, 1);
}
.b227, .b227:hover ~ img {  left:66%;
background: rgba(0, 0, 0, 1);
}
span {
   width: 33%;
   height: 10px;
   display:  inline-block;
   position: absolute;
   bottom: 0px;
}
td{
  position: relative;
}

  </style>
</head>
<body>
  <center>
<table border="0" cellpadding="0" cellspacing="0px" class="b224">
<tr>
    <td colspan="3">
    <span class="b227"></span><span class="b226"></span><span class="b225"></span><img src="http://gamingicons.ucoz.com/_ph/2/2/85136050.png?1448147031">
    </td>
</tr>
<tr>

</tr>
</table>
</center>

</body>

</html>

DENERIK 22.11.2015 15:25
рони,

Не пойдёт. твои span'ы часть изображения загораживают.
А у меня сайт специализируется на иконках. Так что даже 10px это существенно.

Ps.: Всё ребята, спасибо за внимание, но мне подсказали на другом форуме:

$( ".b225" ).hover(function() {
$('.b224').css('background','white');
});
$( ".b226" ).hover(function() {
$('.b224').css('background','gray');
});
$( ".b227" ).hover(function() {
$('.b224').css('background','black');
});
$( ".b228" ).hover(function() {
$('.b224').css('background-image','url(/TEXTURES/47.png)');
});


Часовой пояс GMT +3, время: 13:02.