0

Здравствуйте, нужно в зависимости от того, находится курсор в правой или левой части окна показать определенные блоки. Отдельный для события, когда курсор в левой части окна, отдельный для события, когда курсор в правой части окна.

Я пытался сделать с помощью абсолютно позиционированых блоков, c большим z-index, каждый из которых занимает по 50% ширины экрана и 100% высоты, но этот вариант не подходит, так как из-за того, что эти блоки расположены как-бы поверх контента, то я не могу выделять текст, нажимать ссылки и тд.

Может можно как-то отследить когда курсор находится в левой или правой части экрана по-другому или обойти это?

$('.left-hover').hover(
function(){
  $('.hide-block1').css('opacity', 1)
},
function(){
  $('.hide-block1').css('opacity', 0)
});


$('.right-hover').hover(
function(){
  $('.hide-block2').css('opacity', 1)
},
function(){
  $('.hide-block2').css('opacity', 0)
});
.container{
  background-color: grey;
  width:100%;
  height:400px;
  position:relative;
}
.left-hover, .right-hover{
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  background-color:red;
  opacity:.4;
}
.right-hover{
  right:0;
}
.hide-block1, .hide-block2{
  display:inline-block;
  width:100px;
  height:100px;
  background-color: black;
  opacity:0;
}
.hide-block1{
  margin-right:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="left-hover"></div>
  <div class="right-hover"></div>
  какой-то текст, который не выделится
  <button>Кнопка, которая не нажмется</button>
  <div class="hide-block1">
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
  </div>
  <div class="hide-block2">
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
  </div>
</div>

1

2 ответа 2

2

var whalf = window.innerWidth / 2,
  where = document.getElementById('where');

document.onmousemove = function(event) {
  if (event.pageX < whalf) {
    where.innerHTML = 'слева';
  } else {
    where.innerHTML = 'справа';
  }
}
<span id="where"></span>

0

если на js - можно так. с классами ли if - можете поиграться

var $body = document.body,
    body_width = $body.offsetWidth / 2;

$body.addEventListener('mousemove', function(e){
  if(e.offsetX < body_width)
   $body.classList.add('left')
  else 
    $body.classList.remove('left')
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.