мышь над двумя элементами в том же положении

Могу ли я определить, находится ли мышь над двумя элементами в одном положении? У меня есть два круга, и я бы хотел сделать что-то, если мышь над ними. Некоторые трюки можно выполнить с помощью CSS, а также jQuery.мышь над двумя элементами в том же положении

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Coffee SVG</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1">  
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    <style type="text/css"> 
 
     #coffee-svg > rect { 
 
      fill: #c3c99f; 
 
     } 
 

 
     #coffee-svg circle:hover { 
 
      opacity: 1; 
 
     } 
 

 
     #ingredients #coffe { 
 
      fill: #330a0a; 
 
     } 
 
     #ingredients #milk { 
 
      fill: #fff; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <svg id="coffee-svg" width="500" height="600"> 
 
     <!-- Background --> 
 
     <rect width="100%" height="100%" /> 
 
     
 
     <g id="ingredients"> 
 
      <!-- Coffee --> 
 
      <circle id="coffe" cx="250" cy="250" r="90" opacity="0.8" /> 
 
      <!-- Milk --> 
 
      <circle id="milk" cx="250" cy="160" r="70" opacity="0.8" /> 
 
     </g> 
 
    </svg> 
 
</body> 
 
</html>

EDIT: я добавлю несколько кругов больше, и я бы обнаружить различные комбинации из них. Поэтому ответ @ RodrigoQuiñonesPichioli мне не подходит.

источник

2016-09-02 Vadym Perepeliak

как можно навести курсор в то же время 2-х элементов !! ?? – kukkuz

@kukkuz Элементы перекрываются, и вы находитесь в их части. – Barmar

@Barmar, но один из 2 будет на вершине, и только это будет парить правильно? – kukkuz

Для моей цели я использую родной Javascript функция document.elementsFromPoint

источник

2016-09-13 17:38:20

Я не могу придумать алго, чтобы сделать это, но вот метод бедного человека.

$('.left-over-circle, .right-over-circle').hover(
 
    function() { 
 
    $('.left-over-circle, .right-over-circle').css('background-color', 'red'); 
 
    }, 
 
    function() { 
 
    $('.left-over-circle, .right-over-circle').css('background-color', 'white'); 
 
    } 
 
);

.wrapper { 
 
    position: relative; 
 
    width: 400px; height: 200px; 
 
    border: 1px solid black; 
 
} 
 
.left-under, .right-under { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 200px; height: 200px; 
 
} 
 
.left-under { 
 
    left: 0; 
 
    background-color: pink; 
 
} 
 
.right-under { 
 
    right: 0; 
 
    background-color: blue; 
 
} 
 
.left-under-circle, .right-under-circle { 
 
    position: absolute; 
 
    width: 150px; height: 150px; 
 
    top: 50%; transform: translateY(-50%); 
 
    background-color: black; 
 
    border-radius: 100%; 
 
} 
 
.left-under-circle { 
 
    right: -20%; 
 
} 
 
.right-under-circle { 
 
    left: -20%; 
 
} 
 

 
.left-over, .right-over { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 200px; height: 200px; 
 
    overflow: hidden; 
 
    z-index: 13; 
 
} 
 
.left-over { 
 
    left: 0; 
 
    background-color: hsla(0, 0%, 100%, 0.2); 
 
} 
 
.right-over { 
 
    right: 0; 
 
    background-color: blue; 
 
    background-color: hsla(0, 0%, 100%, 0.2); 
 
} 
 
.left-over-circle, .right-over-circle { 
 
    position: absolute; 
 
    width: 150px; height: 150px; 
 
    top: 50%; transform: translateY(-50%); 
 
    background-color: white; 
 
    border-radius: 100%; 
 
} 
 
.left-over-circle { 
 
    right: -55%; 
 
} 
 
.right-over-circle { 
 
    left: -55%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="left-under"> 
 
    <div class="left-under-circle"></div> 
 
    </div> 
 
    <div class="right-under"> 
 
    <div class="right-under-circle"></div> 
 
    </div> 
 
    <div class="left-over"> 
 
    <div class="left-over-circle"></div> 
 
    </div> 
 
    <div class="right-over"> 
 
    <div class="right-over-circle"></div> 
 
    </div> 
 
</div>

скрипку

https://jsfiddle.net/Hastig/z12tgedz/

источник

2016-09-02 23:18:34

Это приятное решение. Я могу использовать его –

мышь над двумя элементами в том же положении

ответ

Смежные вопросы