Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.10.2017, 03:05
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 41

Смена свойств блока при наведении мыши
Здравствуйте уважаемые, в javascript не силен, но возникла задача, где без него никак. Итак суть задачи: есть 3 блока расположенных в ряд с кое какой информацией, при наведении мыши на любой из блоков, ниже на всю область (во все 3 столбца) должно отображаться детальное описание того блока (изначально все 3 описания скрыты). Средствами css реализовать это очень просто (псевдо-класс hover), но проблема в том, что описание блоков не должно пропадать тогда, как отводится курсор мыши от блока, разве что его направить на другой блок с описанием, тогда вместо предыдущего должно появится новое описание. Вот как я пробовал решить задачу, но увы не работает, прошу помощи знающих, подскажите пожалуйста где я ошибаюсь, jQuery подключен, заранее благодарен… вот сам код:
jQuery('.kv').onmouseover(function() {
jQuery('.kv_text').css( 'visibility', 'visible' );
jQuery('.kv_text').css( 'opacity', '1' );
jQuery('.dom_text').css( 'visibility', 'hidden' );
jQuery('.dom_text').css( 'opacity', '0' );
jQuery('.office_text').css( 'visibility', 'hidden' );
jQuery('.office_text').css( 'opacity', '0' );
});

jQuery('.dom').onmouseover(function() {
jQuery('.dom_text').css( 'visibility', 'visible' );
jQuery('.dom_text').css( 'opacity', '1' );
jQuery('.kv_text').css( 'visibility', 'hidden' );
jQuery('.kv_text').css( 'opacity', '0' );
jQuery('.office_text').css( 'visibility', 'hidden' );
jQuery('.office_text').css( 'opacity', '0' );
});

jQuery('.office').onmouseover(function() {
jQuery('.office_text').css( 'visibility', 'visible' );
jQuery('.office_text').css( 'opacity', '1' );
jQuery('.kv_text').css( 'visibility', 'hidden' );
jQuery('.kv_text').css( 'opacity', '0' );
jQuery('.dom_text').css( 'visibility', 'hidden' );
jQuery('.dom_text').css( 'opacity', '0' );
});
Ответить с цитированием
  #2 (permalink)  
Старый 16.10.2017, 03:13
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 41

Еще так пробовал:
jQuery('.kv').onmouseover(function() {
jQuery('.kv > .kv_text').css( 'visibility', 'visible' );
jQuery('.kv > .kv_text').css( 'opacity', '1' );
jQuery('.dom > .dom_text').css( 'visibility', 'hidden' );
jQuery('.dom > .dom_text').css( 'opacity', '0' );
jQuery('.office > .office_text').css( 'visibility', 'hidden' );
jQuery('.office > .office_text').css( 'opacity', '0' );
});

jQuery('.dom').onmouseover(function() {
jQuery('.dom > .dom_text').css( 'visibility', 'visible' );
jQuery('.dom > .dom_text').css( 'opacity', '1' );
jQuery('.kv_text').css( 'visibility', 'hidden' );
jQuery('.kv_text').css( 'opacity', '0' );
jQuery('.office_text').css( 'visibility', 'hidden' );
jQuery('.office_text').css( 'opacity', '0' );
});

jQuery('.office').onmouseover(function() {
jQuery('.office > .office_text').css( 'visibility', 'visible' );
jQuery('.office > .office_text').css( 'opacity', '1' );
jQuery('.kv > .kv_text').css( 'visibility', 'hidden' );
jQuery('.kv > .kv_text').css( 'opacity', '0' );
jQuery('.dom > .dom_text').css( 'visibility', 'hidden' );
jQuery('.dom > .dom_text').css( 'opacity', '0' );
});
Ответить с цитированием
  #3 (permalink)  
Старый 16.10.2017, 03:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,067

Chmil,
html и css можно?
Ответить с цитированием
  #4 (permalink)  
Старый 16.10.2017, 10:58
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 41

конечно можно, я думал на js нужно делать
Ответить с цитированием
  #5 (permalink)  
Старый 16.10.2017, 11:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,067

Сообщение от Chmil
конечно можно,
покажите код ваших блоков, чтобы понять что вы хотите сделать!!!
Ответить с цитированием
  #6 (permalink)  
Старый 16.10.2017, 11:55
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 41

Извиняюсь )) :
<div style="display: none;" id="content_block_three">
<div class="block_ico">
<div class="kv">
<span class="kv_name"><span class="name_ramka">Квартира</span></span>
<div  class="kv_text">
Отличный тариф для домашнего<br /> интернета с высокой скоростью,<br /> 
Smart-TV и номером телефона!<br />
<span>Подключись прямо сейчас!</span>
</div>
</div>
<div class="dom">
<span class="dom_name"><span class="name_ramka">Дом</span></span>
<div class="dom_text">
<b>Подключение частного дома к сети</b><br /><b> Интернет с нами - проще простого!</b><br />
Быстрый доступ к сети, номер<br /> телефона, возможность интеграции<br /> систем видеонаблюдения!<br /> <span class="green">Подключись прямо сейчас!</span>
</div>
</div>
<div class="office">
<span class="office_name"><span class="name_ramka">Офис</span></span>
<div class="office_text">
<b>Только у нас по-настоящему</b><br />  <b>индивидуальный подход.</b><br /> 
У нас найдется отличное предложение для<br />  любого бизнеса. С нами - выгодно!<br /> 
<span class="red">Подключитесь прямо сейчас!</span> 
</div>
</div>
</div>
</div>


.kv { 
    background: url(../img/kv.png) no-repeat;
    height: 189px;
    width: 128px;
    background-size: 100%;
    float: left;
    margin-right: 100px;
    position: relative;
	cursor: pointer;
}
.kv_name { 
    background: #e17a1c;
    width: 120px;
    height: 120px;
    display: block;
    border-radius: 60px;
    position: absolute;
    top: 97px;
    left: 72px;
    text-align: center;
    color: #fff;
	
}
.dom { 
    background: url(../img/dom.png) no-repeat;
    height: 189px;
    width: 128px;
    background-size: 100%;
    float: left;
    margin-right: 90px;
    position: relative;
	cursor: pointer;
}
.dom_name { 
background: #86c127;
    width: 120px;
    height: 120px;
    display: block;
    border-radius: 60px;
    position: absolute;
    top: 113px;
    left: 4px;
    text-align: center;
    color: #fff;
}
.office { 
background: url(../img/office.png) no-repeat;
    height: 189px;
    width: 128px;
    background-size: 100%;
    float: left;
    position: relative;
	cursor: pointer;
}
.office_name { 
background: #da251c;
    width: 120px;
    height: 120px;
    display: block;
    border-radius: 60px;
    position: absolute;
    top: 99px;
    left: -50px;
    text-align: center;
    color: #fff;
}
.office_text { 
 
    position: absolute;
    bottom: -313px;
    left: -418px;
    background: url(../img/office_text_ramka.png) no-repeat;
    background-size: 100%;
    width: 370px;
    height: 196px;
    padding-top: 6px;
    background-position: bottom;
    padding-top: 86px;
    padding-left: 94px;
    font-family: 'a_AvanteInt';
    font-size: 17px;
    font-weight: 400;
    color: #686868;
    padding-right: 16px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
	
}
.office_text > b { 
    font-size: 23px;
}
.office_text > span { 
    color: #da251c;
    font-weight: bold;
    font-size: 23px;
}

.dom_text {
    position: absolute;
    bottom: -313px;
    left: -177px;
    background: url(../img/dom_ramka.png) no-repeat;
    background-size: 100%;
    width: 401px;
    height: 196px;
    padding-top: 6px;
    background-position: bottom;
    padding-top: 86px;
    padding-left: 72px;
    font-family: 'a_AvanteInt';
    font-size: 17px;
    font-weight: 400;
    color: #686868;
    padding-right: 16px;
    visibility: hidden;
	opacity: 0;
	transition: visibility 0s, opacity 0.5s linear;
}



.dom_text > b { 
    font-size: 20px;
}
.dom_text > span { 
    color: #86c127;
    font-weight: bold;
    font-size: 23px;
}


.kv_text { 

    position: absolute;
    bottom: -296px;
    left: 148px;
    /* right: -100px; */
    background: url(../img/kv_ramka.png) no-repeat;
    background-size: 100%;
    width: 329px;
    height: 158px;
    padding-top: 6px;
    background-position: bottom;
    padding-top: 95px;
    padding-left: 72px;
    font-family: 'a_AvanteInt';
    font-size: 17px;
    font-weight: 400;
    color: #686868;
    padding-right: 16px;

     visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
.kv_text > b { 
    font-size: 20px;
}
.kv_text > span { 
    color: #e17a1c;
    font-weight: bold;
    font-size: 23px;
}
Ответить с цитированием
  #7 (permalink)  
Старый 16.10.2017, 12:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,067

Chmil,
css класс open строка 173 + js
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .kv {
    background: url(http://on-lite.org/img/kv.png) no-repeat;
    height: 189px;
    width: 128px;
    background-size: 100%;
    float: left;
    margin-right: 100px;
    position: relative;
  cursor: pointer;
}
.kv_name {
    background: #e17a1c;
    width: 120px;
    height: 120px;
    display: block;
    border-radius: 60px;
    position: absolute;
    top: 97px;
    left: 72px;
    text-align: center;
    color: #fff;

}
.dom {
    background: url(http://on-lite.org/img/dom.png) no-repeat;
    height: 189px;
    width: 128px;
    background-size: 100%;
    float: left;
    margin-right: 90px;
    position: relative;
  cursor: pointer;
}
.dom_name {
background: #86c127;
    width: 120px;
    height: 120px;
    display: block;
    border-radius: 60px;
    position: absolute;
    top: 113px;
    left: 4px;
    text-align: center;
    color: #fff;
}
.office {
background: url(http://on-lite.org/img/office.png) no-repeat;
    height: 189px;
    width: 128px;
    background-size: 100%;
    float: left;
    position: relative;
  cursor: pointer;
}
.office_name {
background: #da251c;
    width: 120px;
    height: 120px;
    display: block;
    border-radius: 60px;
    position: absolute;
    top: 99px;
    left: -50px;
    text-align: center;
    color: #fff;
}
.office_text {

    position: absolute;
    bottom: -313px;
    left: -418px;
    background: url(http://on-lite.org/img/office_text_ramka.png) no-repeat;
    background-size: 100%;
    width: 370px;
    height: 196px;
    padding-top: 6px;
    background-position: bottom;
    padding-top: 86px;
    padding-left: 94px;
    font-family: 'a_AvanteInt';
    font-size: 17px;
    font-weight: 400;
    color: #686868;
    padding-right: 16px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;

}
.office_text > b {
    font-size: 23px;
}
.office_text > span {
    color: #da251c;
    font-weight: bold;
    font-size: 23px;
}

.dom_text {
    position: absolute;
    bottom: -313px;
    left: -177px;
    background: url(http://on-lite.org/img/dom_ramka.png) no-repeat;
    background-size: 100%;
    width: 401px;
    height: 196px;
    padding-top: 6px;
    background-position: bottom;
    padding-top: 86px;
    padding-left: 72px;
    font-family: 'a_AvanteInt';
    font-size: 17px;
    font-weight: 400;
    color: #686868;
    padding-right: 16px;
    visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}



.dom_text > b {
    font-size: 20px;
}
.dom_text > span {
    color: #86c127;
    font-weight: bold;
    font-size: 23px;
}


.kv_text {

    position: absolute;
    bottom: -296px;
    left: 148px;
    /* right: -100px; */
    background: url(http://on-lite.org/img/kv_ramka.png) no-repeat;
    background-size: 100%;
    width: 329px;
    height: 158px;
    padding-top: 6px;
    background-position: bottom;
    padding-top: 95px;
    padding-left: 72px;
    font-family: 'a_AvanteInt';
    font-size: 17px;
    font-weight: 400;
    color: #686868;
    padding-right: 16px;

     visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
.kv_text > b {
    font-size: 20px;
}
.kv_text > span {
    color: #e17a1c;
    font-weight: bold;
    font-size: 23px;
}

.open{
  visibility: visible;
  opacity: 1
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var divs = $(".block_ico>div");
divs.mouseenter(function() {
$(">div",divs ).not($(">div", this).addClass("open")).removeClass("open")
})
});
  </script>
</head>

<body>
<div id="content_block_three">
<div class="block_ico">
<div class="kv">
<span class="kv_name"><span class="name_ramka">Квартира</span></span>
<div  class="kv_text">
Отличный тариф для домашнего<br /> интернета с высокой скоростью,<br />
Smart-TV и номером телефона!<br />
<span>Подключись прямо сейчас!</span>
</div>
</div>
<div class="dom">
<span class="dom_name"><span class="name_ramka">Дом</span></span>
<div class="dom_text">
<b>Подключение частного дома к сети</b><br /><b> Интернет с нами - проще простого!</b><br />
Быстрый доступ к сети, номер<br /> телефона, возможность интеграции<br /> систем видеонаблюдения!<br /> <span class="green">Подключись прямо сейчас!</span>
</div>
</div>
<div class="office">
<span class="office_name"><span class="name_ramka">Офис</span></span>
<div class="office_text">
<b>Только у нас по-настоящему</b><br />  <b>индивидуальный подход.</b><br />
У нас найдется отличное предложение для<br />  любого бизнеса. С нами - выгодно!<br />
<span class="red">Подключитесь прямо сейчас!</span>
</div>
</div>
</div>
</div>

</body>
</html>

Последний раз редактировалось рони, 16.10.2017 в 12:30.
Ответить с цитированием
  #8 (permalink)  
Старый 16.10.2017, 14:36
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 41

Заработало, огромное спасибо Рони - второй раз обращаюсь на форум за помощью и второй раз помогает решить вопрос
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При наведении мыши на иконку происходит замена её на кнопку Coriolan161 Events/DOM/Window 1 21.11.2015 21:12
Изменения высоты блока при наведении курсора optron Общие вопросы Javascript 2 28.10.2015 21:24
смена div блока при наведении курсора мыши Денис2201 Общие вопросы Javascript 3 07.10.2013 12:43
Появление ссылки при наведении мыши nikolaymac jQuery 1 05.09.2013 14:32
Смена картинок при наведении utb jQuery 0 06.04.2012 07:58