Форум

DENERIK · #1 (**permalink**) 22.11.2015, 12:45

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

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

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

Mess4me · #2 (**permalink**) 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 · #3 (**permalink**) 22.11.2015, 12:52

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

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

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

рони · #4 (**permalink**) 22.11.2015, 13:19

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

DENERIK · #5 (**permalink**) 22.11.2015, 13:44

Сообщение от рони

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

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

рони · #6 (**permalink**) 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 · #7 (**permalink**) 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)');
});

Форум

Справочник

Discord чат

Курсы javascript