Как сделать отображение текста и смена background DIVa при наведении на текст?

Question

[Vladis026]

Привет всем! Подскажите пожалуйста!
Есть 2 блока Bootstrap :

<div class="row">
<div class="col-md-6">
<div class="text1">Текст 1</div>
</div>

<div class="col-md-6">
<div class="text2">Текст 2</div>
</div>
</div>

Как при на наведении мыши допустим на слово "Текст 2" появлялось в соседнем блоке "Текст 1" и при этом background блока менялся допустим на красный цвет?

Пример:



Заранее благодарен за ответ!

Answer 1

[Ankhena]

На CSS так
https://jsfiddle.net/tqg0Le91/
или так: https://jsfiddle.net/a734zx6o/
позиционируйте как вам нравится, думаю мысль понятна.

Либо на JS. Решений в инете полным полно.

Answer 2

[antanol]

Если через jQuery:

$(document).ready(function(){    
    $(".text2").click(function(){
        $(".text1").toggle();

сделает видимым блок с классом text1, если в css до этого задано:

.text1{
    display: none;
}

поменять фон можно через:

$(document).ready(function(){    
    $(".text2").click(function(){
        $(".text1").css({ "background-color": "#f00"});
    });
});

Comments

[antanol]

$(document).ready(function(){    
    $(".text2").click(function(){
        $(".text1").css({ "background-color": "#f00"});
        $(".text1").html("Сюда впишите текст для левого поля"); //внесёт текст внутрь ВСЕХ элементов класса text1. Почему вы не используете id?
    });
});