Question

当我将鼠标悬停在整个DIV kontakt-block上时，我需要更改跨越TEXT-DISPLAY的文本。当我只有一个kontakt-block时，我会自己做。但是当它上课时我不能。在每个跨度中，我需要在悬停时显示不同的文本。

<div class="kontakt-block color1" onmouseover="changeText('email@gmail.com')" onmouseout="defaultText('Email')">
     <div class="kontakt-block-zawartosc">
          <span class="text-display">Email</span>
     </div>
</div>
<div class="kontakt-block color2">
     <div class="kontakt-block-zawartosc">
          <span class="text-display">Phone</span>
     </div>
</div>
<div class="kontakt-block color3">
     <div class="kontakt-block-zawartosc">
          <span class="text-display">Facebook</span>
     </div>
</div>

<script>
                    function changeText(text) {
                        var display = document.getElementsById('text-display');
                        display.innerHTML = "";
                        display.innerHTML = text;
                    }
                    function defaultText(textd) {
                        var display = document.getElementsById('text-display');
                        display.innerHTML = "";
                        display.innerHTML = textd;
                    }
</script>

这就是我的所作所为。它有效，但只有一个跨度可以改变。

Answer 1

另一种方法是使用纯css和html，只需一个选项

UIView

.text-display2 {
  display:none;
}

.kontakt-block:hover .text-display {
  display:none;
}

.kontakt-block:hover .text-display2 {
  display:block;
}

Answer 2

此逻辑使用数据字段来了解要设置的值。

document.querySelectorAll('.kontakt-block').forEach(function(block){
  block.addEventListener('mouseenter', changeText);
  block.addEventListener('mouseleave', defaultText);
});

function changeText (e) {
  var $span = $(e.target).find('.text-display')
    .fadeOut('slow', function(){
      $span.text(e.target.dataset.hoverValue).fadeIn();
    });
}

function defaultText (e) {
  var $span = $(e.target).find('.text-display')
    .fadeOut('slow', function(){
      $span.text(e.target.dataset.defaultValue).fadeIn();
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kontakt-block color1" data-default-value="Email" data-hover-value="email@gmail.com">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Email</span>
  </div>
</div>
<div class="kontakt-block color2" data-default-value="Phone" data-hover-value="123-456-7890">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Phone</span>
  </div>
</div>
<div class="kontakt-block color3" data-default-value="Facebook" data-hover-value="fbHandle">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Facebook</span>
  </div>
</div>

Answer 3

这似乎是你正在尝试做的事情。

＆＃13;

function changeMyText(obj, text) {
  var workingObj = obj.children;
  var oneDeeper = workingObj[0].children;
  oneDeeper[0].innerHTML = text;
}

＆＃13;

<div class="kontakt-block color1" onmouseover="changeMyText(this, 'Changed text 1')" onmouseout="changeMyText(this, 'Email')">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Email</span>
  </div>
</div>
<div class="kontakt-block color2" onmouseover="changeMyText(this, 'Changed text 2')" onmouseout="changeMyText(this, 'Phone')">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Phone</span>
  </div>
</div>
<div class="kontakt-block color3" onmouseover="changeMyText(this, 'Changed text 3')" onmouseout="changeMyText(this, 'Facebook')">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Facebook</span>
  </div>
</div>

＆＃13;

Answer 4

使用纯JavaScript和CSS进行转换：

＆＃13;

function changeText() {
  var span = this.querySelector('.text-display');
  setText(span, this.dataset.sample);
}

function defaultText() {
  var span = this.querySelector('.text-display');
  setText(span, this.dataset.default);
}

function setText(span, text) {
  span.classList.add('hide');
  setTimeout(function() {
     span.innerHTML = text;
     span.classList.remove('hide');
  }, 310, span, text);
}

var divs = document.getElementsByClassName('kontakt-block');
for (var div of [...divs]) {
  div.addEventListener("mouseover", changeText, false);
  div.addEventListener("mouseout", defaultText, false);
}

＆＃13;

.text-display.hide {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

.text-display {
  opacity: 1;
}

＆＃13;

<div class="kontakt-block color1" data-default="Email" data-sample="email@gmail.com">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Email</span>
  </div>
</div>
<div class="kontakt-block color2" data-default="Phone" data-sample="123-456-7890">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Phone</span>
  </div>
</div>
<div class="kontakt-block color3" data-default="Facebook" data-sample="Login with FB">
  <div class="kontakt-block-zawartosc">
    <span class="text-display">Facebook</span>
  </div>
</div>

＆＃13;

替换悬停jQuery JS上的元素文本

4 个答案: