Вопросы Теги

Добавить фоновый рисунок и текст при наведении курсора

Вы также можете использовать метод compareTo() для сравнения двух строк. Если результат compareTo равен 0, то две строки равны, в противном случае сравниваемые строки не равны.

== сравнивает ссылки и не сравнивает фактические строки. Если вы создали каждую строку, используя new String(somestring).intern(), вы можете использовать оператор == для сравнения двух строк, в противном случае могут использоваться только методы equals () или compareTo.

-1
задан Islam Elshobokshy 17 January 2019 в 14:20
поделиться

2 ответа

Он отлично работает, как вы можете видеть в этом примере: 

$(".picture").hover(function() {
  $(this).children(".text").fadeToggle();
});
.picture {
  width: 200px;
  height: 200px;
  background-image: url("https://www.w3schools.com/css/trolltunga.jpg");
}

.text {
  background-color: rgba(255, 0, 0, 0.8);
  width: 200px;
  height: 200px;
  display: none;
}
<div class="picture">
  <div class="text">
    <h1>Hey everyone!</h1>
  </div>

</div>

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

0
ответ дан Islam Elshobokshy 17 January 2019 в 14:20
поделиться

jQuery (изменить фон / показать текст):

HTML: 

<div class="picture">
    <div class="text">
        <h1>Hey everyone!</h1>
    </div>
</div>

CSS: 

.picture {
    width: 200px;
    height: 200px;
    background-image: url("https://www.w3schools.com/css/trolltunga.jpg");
}

.text {
    background-color: rgba(255, 0, 0, 0.4);
    width: 200px;
    height: 200px;
    display: none;
}

JS: 

$(".picture").hover(function() {

    $(this).animate({
        opacity: 0.7
    }, 100, function() {
        $(this).css("background-image", "url('https://upload.wikimedia.org/wikipedia/en/2/27/Bliss_%28Windows_XP%29.png')");
    });

    $(".text").fadeToggle();
}, function() {

    $(this).animate({
        opacity: 0.7
    }, 100, function() {
        $(this).css("background-image", "url('https://www.w3schools.com/css/trolltunga.jpg')");
    });

    $(".text").fadeToggle();
});
[1112 ] https://jsfiddle.net/wlecki/28vschr1/

Только CSS-решение:

HTML: 

<div class="picture">
  <div class="text">
    <h1>Hey everyone!</h1>
  </div>
</div>

CSS: [1114 ] 

.picture {
  width: 200px;
  height: 200px;
  background-image: url("https://www.w3schools.com/css/trolltunga.jpg");
}

.text {
  background-color: rgba(255, 0, 0, 0.4);
  width: 200px;
  height: 200px;
  opacity: 0;
}

.picture:hover {
  background-image: url("https://upload.wikimedia.org/wikipedia/en/2/27/Bliss_%28Windows_XP%29.png");
}

.picture:hover .text {
  opacity: 1;
}

https://jsfiddle.net/wlecki/9vnokdec/

0
ответ дан wlecki 17 January 2019 в 14:20
поделиться
Другие вопросы по тегам:

Похожие вопросы: