Как изменить содержимое блока при наведении jquery

Тема в разделе "JavaScript", создана пользователем Sarboys, 4 фев 2015.

  1. Sarboys

    Sarboys

    Регистрация:
    30 янв 2015
    Сообщения:
    0
    Симпатии:
    0
    http://joxi.ru/DmBxKp9SPVkxAP
    Надо чтоб при наведении менялся фон и содержимое(чтоб появился текст)
    Фон я при наведении поменял(нижу),а вот как заменить содержимое не знаю.
    Помогите,буду признателен










    <h2>Решение по безопасности</h2>
    <div id="active-blocks">
    <div class="active block1">
    <h5>Антивирусная<br /> защита</h5>
    <img src="img/active1.png"/>
    </div>
    <div class="active block2">
    <h5>Межсетевые экраны<br />(МСЭ)</h5>
    <img src="img/active2.png"/>
    </div>
    <div class="active block3">
    <h5>Защита информации<br />от НСД</h5>
    <img src="img/active3.png"/>
    </div>
    </div>


    $(".active.block1").hover(function() {
    $(this).stop().animate({ backgroundColor: "#4281B7"}, 400);
    },function() {
    $(this).stop().animate({ backgroundColor: "#ffffff" }, 400);
    });
    $(".active.block2").hover(function() {
    $(this).stop().animate({ backgroundColor: "#4281B7"}, 400);
    },function() {
    $(this).stop().animate({ backgroundColor: "#ffffff" }, 400);
    });
    $(".active.block3").hover(function() {
    $(this).stop().animate({ backgroundColor: "#4281B7"}, 400);
    },function() {
    $(this).stop().animate({ backgroundColor: "#ffffff" }, 400);
    });
    });
     
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    что конкретно хотите поменять?

    можно например вложить в два блока, один сделать невидимым. И делать его видемым при наведении, а первый наоборот.
     
  3. Sarboys

    Sarboys

    Регистрация:
    30 янв 2015
    Сообщения:
    0
    Симпатии:
    0
    http://joxi.ru/8235GZyhKNpQrO
    при наведении менялся фон и вместо всего содержимого появлялся текст с описанием ..
    Взять к примеру первый блок,как на скрине выше
    <div id="active-blocks">
    <div class="active block1">
    <h5>Антивирусная<br /> защита</h5>
    <img src="img/active1.png"/>
    </div>
    в блок актив-блокс вставить еще один блок,задать ему стиль и скрыть?
    --- Добавлено, 4 фев 2015 ---
    если да,то как это на Jquery отобразить
     
  4. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    $('element').show();
    $('element').hide();
     
  5. Sarboys

    Sarboys

    Регистрация:
    30 янв 2015
    Сообщения:
    0
    Симпатии:
    0

    <div id="active-blocks">
    <div class="active block1">
    <h5>Антивирусная<br /> защита</h5>
    <img src="img/active1.png"/>
    <div class="active-zamena"><p>111</p></div> - Добавил блок,задал ему стиль
    </div>


    $(document).ready(function() {
    $('div.active').hover(function() {
    $('div.active-zamena', this).show();
    });
    $('div.active-zamena', this).hide();
    });

    ну вот получилось,она блок появляется,ноо,при отведении мышки не убирается обратно( ( (
    подскажите пожалуйста
     
  6. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    Код:
    $('div.active').hover(
    function() {
        $('div.active-zamena', this).show();
    }, function() {
        $('div.active-zamena', this).hide();
    }); 
     
    Sarboys нравится это.
  7. Sarboys

    Sarboys

    Регистрация:
    30 янв 2015
    Сообщения:
    0
    Симпатии:
    0


    спасибо большое помогло
    еще вопрос
    у меня таких блока 3.
    http://joxi.ru/L21RgykfV58kAX

    чтоб не писать для каждого скрипт,есть возможность их как то связать?
    через атрибут или как то так?
    спасибо
     
  8. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    по идее так:
    Код:
    $('div.active').each(function() {
    $(this).hover(
    function() {
      $('div.active-zamena', this).show();
    }, function() {
      $('div.active-zamena', this).hide();
    });
    });