после наведения мыши обратно в предыдущее состояние с помощью мыши? -без установки фиксированных значений

Я работаю над палитрой цветов, чтобы изменить CSS-свойства SVG-изображений с помощью JS. Мой элементарный код работает до сих пор, чтобы изменить цвет заливки SVG-Path при щелчке и при наведении курсора.

Я хочу, чтобы цвет заливки возвращался к предыдущему «выбранному» цвету после нажатия кнопки мышью. Я знаю, что могу определить фиксированное значение для функции mouseout. Но если пользователь выбирает цвет с помощью щелчка, я хочу, чтобы выбранный выбор был установлен (чтобы позже поместить их в php-переменную) и быстрое наведение мыши-'blend- ins' действительно должен просто показываться временно в тот момент, когда пользователь наводит курсор мыши.

Так сказать: выйдите из состояния наведения мыши, вернувшись в состояние щелчка, если пользователь щелкнул раньше.

На мгновение цвет будет установлен на выбор курсора мыши; это должно быть только визуальное руководство для пользователя, а не сама настройка.

Возможно, мой JS-пример объяснит лучше, чем мои слова:

$(function(){
$("#s01aFI").css("fill","#fff");

  $("#fw01-f01").mouseover(function(){
  $("#s01aFI").css("fill","#e53741");
  });
  $("#fw01-f01").click(function(){
  $("#s01aFI").css("fill","#e53741");
  });
  $("#fw01-f01").mouseout(function(){
  $("#s01aFI").css("fill","RECENT-STATE");
  });

  ...

});
.f01 { background-color:#e53741; }
.f02 { background-color:#419327; }
...
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
*JS-Function*
</script>

<svg>
<path id="s01aFI" d="***"/>
</svg>

<button id="fw01-f01" class="farbwahler f01">01</button>
<button id="fw01-f02" class="farbwahler f02">02</button>
...
P.S. If you can give me a hint for redundancy also it would be heavenly; since I am about to do this for lots of colors and elements and I am new to JS since yesterday. :)


javascript jquery css mouseover mouseout
person Dexter    schedule 24.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если я правильно понял, вам нужен этот код:

$(this) - работает с текущей кнопкой при наведении

$(function(){
  var preview = $("#s01aFI");
  var colorBut = $(".farbwahler"); //any button
  var curColor = "gold";

  colorBut.mouseover(function(){
    $(this).data('clicked', false);
    var color = $(this).css('background-color');
    preview.css("fill",color);
  });
 
  colorBut.mouseout(function(){
    var isClick = $(this).data('clicked');
    if(!isClick){
      var color = $(this).css('background-color');
      preview.css("fill",curColor );
    }
  });
  
  colorBut.click(function(){
    var color = $(this).css('background-color');
    preview.css("fill",color);
    curColor = color;
    $(this).data('clicked', true);
  });
});
.f01 { background-color:#e53741; }
.f02 { background-color:#419327; }

svg {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg>
  <path id="s01aFI" d="M 10,110 L 10,10 L 40,50 L 70,10 L 100,50 L 130,10 L 130,110 z"
          fill="gold" stroke="orange" stroke-width="5"/>
</svg>

<button id="fw01-f01" class="farbwahler f01">01</button>
<button id="fw01-f02" class="farbwahler f02">02</button>

person Olga Kramarchuk    schedule 24.06.2017
comment
да. Спасибо! Вы достойны короны за этот ответ. :) Мало того, что это работает, это также идеальное упражнение для меня, чтобы следовать вашим линиям и видеть разницу между моей идеей и тем, как это работает на самом деле. - person Dexter; 25.06.2017