Блог

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

 <DIV CLASS="product"><A HREF="...">blah</A></DIV>
  

 .product a { color:blue; }
.product:hover a { color:red; }
  

 $('.product a').css('color','green');
$('.product:hover a').css('color','yellow');
  

 16:03:16.250 $('.product:hover a').css('color')
16:03:16.255 undefined
  

Комментарии:

1. Я не совсем понимаю, откуда берется зеленый цвет? Если вы показываете предварительный просмотр при наведении курсора мыши на продукт, то ссылка станет желтой…

2. На изображении это похоже на .product a { color:green; } и .product:hover a { color:red; } , и я хочу динамически менять красный цвет на желтый, но $('.product:hover a').css('color','yellow'); не работает, ничего не происходит. В конечной ситуации я хочу, чтобы при наведении курсора на div был зеленый, как обычно, и желтый.

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

4. @WOUNDEDStevenJones к сожалению, это не работает в ситуации с OP, потому что это постоянно меняет цвет (что вы можете видеть в некоторых ответах ниже) — они просто хотят применить временные цвета, поэтому им придется сохранять старые значения при наведении курсора мыши и повторно применять их при наведении курсора мыши.

5.если вы ищете объяснение этому вопросу, это потому, что при использовании .css() он устанавливает style свойство для выбранного элемента api.jquery.com/css/#css2 , и элемента нет .product:hover , потому что это зависшее состояние .product элемента. Для большего контроля над такого рода событиями мыши, связанные ответы, по-видимому, предлагают решения.

Ответ №1:

 $("<style>.preview .product:hover a{color:yellow;}</style>").appendTo("head");
  

 $("<style> 
.preview .product a { color:green; } 
.preview .product:hover a { color:yellow; } 
</style>").appendTo("head");

$("#container").mouseover(function() {
  $("#container").addClass('preview');
}).mouseout(function() {
  $("#container").removeClass('preview');
});  

 .product a { color:blue; }
.product:hover a { color:red; }
/* for demo only */
#container { padding: 10px;  background: #f5f5f5;}
#container div {  padding: 10px; margin:20px;  border: 1px solid grey; }  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="product">
    <a href="...">hover colour changes when div is hovered</A>
  </div>
</div>  

 // decalre variables to save the default colours
var origColor = $('.product a').css('color');
var origColorHover;  // we can't set this until the link is hovered

$(".product").mouseover(function() {
    // save hover colour
    if (origColorHover == "")  origColorHover = $(this).css('color');    
    // set the temporary hover colours
    $('.product a').css('color','green');
    $('.product a:hover').css('color','yellow');
}).mouseout(function() {
    // reset the original colour after hovering
    $('.product a').css('color', origColor);
    $('.product a:hover').css('color', origColorHover);
});  

 .product a { color:blue; }
.product a:hover { color:red; }
/* for demo only */
#container { padding: 10px;  background: #f5f5f5;}
#container div {  padding: 10px; margin:20px;  border: 1px solid grey; }  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="product">
    <a href="...">hover colour changes when link is hovered</A>
  </div>
</div>  

 $(".product").mouseover(function() {
  $("#container").addClass('preview');
}).mouseout(function() {
  $("#container").removeClass('preview');
});  

 .product a { color:blue; }
.product:hover a { color:red; }

.preview .product a { color:green; }
.preview .product:hover a { color:yellow; }

/* for demo only */
#container div { padding: 10px; margin: 10px; background: lightgrey;}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <DIV CLASS="product">
    <A HREF="...">hover colour changes when div is hovered</A>
  </DIV>
</div>  

 $("#container").mouseover(function() {
    $(this).addClass('preview');
}).mouseout(function() {
    $(this).removeClass('preview');
});  

 .product a { color:blue; }
.product:hover a { color:red; }
.product2 a { color:green; }
.product2 a:hover { color:yellow; }

.preview { text-align: center;}
.preview .product a { color:green; }
.preview .product:hover a { color:orange; }
.preview .product2 a { color:purple; font-weight: bold; }
.preview .product2 a:hover { color:yellow; }

/* for demo only */
#container { padding: 10px;  background: #f5f5f5;}

#container div {  padding: 10px; margin:10px;  border: 1px solid grey; }  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <DIV CLASS="product">
    <A HREF="...">hover colour changes when container is hovered</A>
  </DIV>
  <DIV CLASS="product2">
    <A HREF="...">hover colour changes when link is hovered</A>
  </DIV>
</div>  

Комментарии:

1. Да, это больше похоже на то, что мне нужно, но в моем проекте пользователь может выбрать цвет в цветовом круге. Смотрите изображение в исходном сообщении (обновлено сейчас). Поэтому я не могу добавлять / удалять классы, но это дает мне новую идею — создавать классы динамически… Я попробую, но не думаю, что это сработает.

2. @Arvy Да, но как «динамический» не было указано — изменение его в JS является динамическим, изменение его с использованием значений переменных, которые меняются во время выполнения, — это совершенно другой уровень! Для этого нужен другой ответ, чем как изменить цвет при наведении курсора мыши в jQuery , на что отвечают ответы здесь 🙂 Возможно, мы все неправильно поняли, но главное: если вопрос и ответы не совпадают, это не поможет другим пользователям (и в этом суть SO). Мы не можем изменить все ответы, поэтому лучший вариант — задать новый вопрос о настройке на основе пользовательского ввода. Но мы все равно поможем!

3. @Arvy Вам все равно следует опубликовать здесь — теперь мы понимаем проблему (просто потребовалось некоторое время, чтобы добраться до нее), поэтому мы можем помочь вам, отредактировав вопрос, чтобы объяснить его, если потребуется дополнительная помощь. Этот вопрос было сложно объяснить кому бы то ни было, даже носителям английского языка 🙂 Я действительно думаю, что мы можем помочь сейчас. Пожалуйста, не откладывайте задавать другие вопросы здесь в будущем, просто может потребоваться немного времени, чтобы разобраться с нетривиальными, но большую часть времени все должно быть в порядке 🙂 Мы здесь, чтобы помочь!

4. После того, как я лег спать, размышляя о проблеме, я попытался думать по-другому и нашел решение, которое работает. Я поделюсь этим здесь, чтобы помочь другим людям, но я прошу вас отредактировать все необходимое, чтобы сделать это как можно более понятным. Большое спасибо за всю вашу помощь @FluffyKitten!

5. @Arvy Рад, что вы нашли решение! Я посмотрю позже, чтобы увидеть, нуждается ли формулировка в каких-либо изменениях 🙂 Может быть, вы могли бы добавить, где добавлен этот код, просто чтобы другим пользователям было понятно — похоже, что они добавлены в CSS, но я не думал, что вы можете это изменить, так что это делается через jQuery?

Ответ №2:

 $(".product a").hover(
    function() {
        $(this).css("color", "yellow");
    },
    function() {
        $(this).css("color", "green");
    }
);
  

Комментарии:

1. По-видимому, ему не нравится лямбда. Я отредактировал его до рабочей версии.

2. Это навсегда изменит цвет «A» при наведении на него курсора (A, а не DIV). Что мне нужно, так это изменить цвет текста «A» только при наведении курсора мыши на DIV (не на ссылку) и вернуться к исходному цвету при размытии.

3. Я вас понял. Я только что сделал еще одно обновление, чтобы учесть это. Функция наведения курсора принимает две функции. Один устанавливает цвет при наведении курсора, а другой — цвет без наведения курсора.

4. Хммм, пока нет, это изменит цвет при наведении курсора, но навсегда. Я обновлю исходный вопрос изображением, чтобы он был более четким.

Ответ №3:

 $(document).ready(function () {
  $('#container .product a').hover(function () {
    if (isPreviewActive()) {
      $(this).css('color', $('#hover').val());
    }
  }, function () {
    if (isPreviewActive()) {
      $(this).css('color', $('#color').val());
    }
  });

  $('#checkbox').change(function () {
    if (this.checked) {
      $('.product a').css('color', $('#color').val());
    } else {
      $('.product a').css('color', '');
    }
  });
});

function isPreviewActive() {
  return $('#checkbox')[0].checked;
}  

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

<div id="container">
  <div class="product"><a href=="#">blah</a></div>
</div>

<p>
  <label>Color:</label>
  <input id="color" type="text" value="red"></input>
  <label>Hover:</label>
  <input id="hover" type="text" value="yellow"></input>
</p>
Enable Preview? <input type="checkbox" id="checkbox"></input>  

Комментарии:

1. Нет, вы меняете цвет текста. Это работает. Как я уже сказал, я хочу изменить цвет при наведении курсора мыши. Если вы измените свой код с $(‘.product a’) на $(‘.product:hover a’), это не сработает.

2. Вы правы. Я обновил код, и теперь он работает.

3. Хммм, работает, но не совсем для того, что мне нужно. Если вы добавите padding:10px в .product при наведении курсора мыши на нее (div), цвет «A» не изменится. Что мне нужно, так это навести курсор мыши на контейнер и изменить цвет наведения курсора на «A». Но я нашел решение, смотрите Мой новый комментарий.

Ответ №4:

 :root {
   --normal-color: green;
   --hover-color: red;
}
  

 .product a { color: var(--normal-color); }
.product:hover a { color: var(--hover-color); }
  

 $(':root').css('--normal-color','blue');
$(':root').css('--hover-color','yellow');