Изменить цвет объекта, просто наведя мышку

Question

Я хочу изменить цвет круга с зеленого на красный, просто наведя стрелку (указатель мыши) на круг (без щелчков). Но для красного круга человек должен щелкнуть по кругу, чтобы изменить цвет. Круги также должны менять свое положение каждый раз на экране при нажатии или наведении курсора.

Обычно красная точка - щелчок, зеленая точка - не щелкают. Оба цвета должны чередоваться случайным образом, но красный кружок должен появиться больше, соотношение 65/35.

Код находится в HTML, CSS и JavaScript (JS)

В настоящее время демонстрация выглядит так: https://jsfiddle.net/sidsingh29/591hfwLd/20/

Второе решение: если это невозможно или слишком сложно, я хотел бы просто заставить все точки исчезнуть через 1 секунду без каких-либо курок. В этом красном и зеленом кругах оба исчезнут за 1 сек c автоматически, но красный круг должен появляться чаще, соотношение красного и зеленого 65/35. Также, когда цвета меняются, положение круга также должно измениться на экране в любую случайную точку на экране. Нам нужно убедиться, что круг не go выходит за пределы ширины / размера экрана.

** код **

HTML:


<div id="test"></div>


CSS:

#test {
    position:absolute;
    height: 70px;
  width: 100px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;}


JavaScript + jQuery (edge):


$('#test').click(function() {
  var docHeight = $(document).height(),
    docWidth = $(document).width(),
    $div = $('#test'),
    divWidth = $div.width(),
    divHeight = $div.height(),
    heightMax = docHeight - divHeight,
    widthMax = docWidth - divWidth;

  $div.css({
    left: Math.floor( Math.random() * widthMax ),
    top: Math.floor( Math.random() * heightMax ),
    background: Math.random() > 0.3 ? 'red' : 'green', 
  });
});

Answer 1

Сделать в базисе c CSS.

#test {
  position:absolute;
  height: 70px;
  width: 100px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
}

#test:hover {
  background-color : red;
}

<div id="test"></div>

Если вы хотите выполнить JS, когда элемент зависает, используйте .hover() вместо click() в вашем коде. Вы также можете определить, является ли точка в настоящее время красной или зеленой, с помощью if (div.style.backgroundColor == "red")

Этот код работает не так, как вы ожидаете, потому что я не понимаю, что вы хотите сделать именно так, но он должен дать ты и идеар.

$('#test').click(function() {
  if (document.getElementById("test").style.backgroundColor != "green") {
    var docHeight = $(document).height(),
    docWidth = $(document).width(),
    $div = $('#test'),
    divWidth = $div.width(),
    divHeight = $div.height(),
    heightMax = docHeight - divHeight,
    widthMax = docWidth - divWidth;

    $div.css({
      left: Math.floor( Math.random() * widthMax ),
      top: Math.floor( Math.random() * heightMax ),
      background: Math.random() > 0.3 ? 'red' : 'green', 
  });
 }
});

$('#test').hover(function() {
  if (document.getElementById("test").style.backgroundColor == "green" && $('#test').is(":hover")) {
    var docHeight = $(document).height(),
    docWidth = $(document).width(),
    $div = $('#test'),
    divWidth = $div.width(),
    divHeight = $div.height(),
    heightMax = docHeight - divHeight,
    widthMax = docWidth - divWidth;

    $div.css({
      left: Math.floor( Math.random() * widthMax ),
      top: Math.floor( Math.random() * heightMax ),
      background: Math.random() > 0.3 ? 'red' : 'green', 
  });
 }
});

#test {
    position:absolute;
    height: 70px;
  width: 100px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"></div>