个人中心
gpt4 book ai didi

javascript - Span 悬停不起作用以及如何更改 div 外部元素的属性

转载 作者：行者123 更新时间：2023-12-02 21:45:02 24 4
gpt4 key购买 nike

有没有办法让我将鼠标悬停在跨度文本(“engpar1call”)上并使名为“engpar1”的 div 出现在屏幕上？

在我的 CSS 文件中，我将正文设置为内容显示在 2 列中； “transpar1”始终在左侧可见，当将鼠标悬停在“engpar1call”范围上时，应该会出现“engpar1”。我似乎无法让 :hover 工作，但我可以设置跨度的样式。

.content {
  color: white;
  font-size: 10vh;
  font-weight: 700;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2.5rem;
  grid-template-rows: 1;
  text-align: left;
}

.engpar1 {
  font-size: 10vh;
  font-weight: 700;
  grid-column: 2;
  grid-row: 1;
  display: none;
  transition-duration: 0.5s;
}

span.engpar1call {
  color: #D93636;
}
    <body>
      <div class="content">
        <div class="transpar1">
          <p>
            O le atulaulau (lea e taua e le isi o le Potutusi) o se numera e le mafaitaulia ma atonu e le iʻu o fale o le hexagonal, faatasi ai ma le tele o 
<span class="engpar1call">vaalele</span> i le va, e siʻosiʻomia e nofoaafi maualalo. Mai soʻo se tasi
            o le hexagons e mafai e se tasi ona vaʻavaʻai, vavalalata, pito i luga ma lalo. O le tufatufaina o faletusi e le mafai ona faʻaaogaina. Luasefulu fata, lima fata uumi i le tasi itu, ufiufi uma itu sei vagana ai lua; latou maualuga, o le mamao
            mai le fola i luga o le taualuga, e toetoe lava a sili atu nai lo se tusi tusi masani. O se tasi o itu saoloto e tau atu i se ala laupapa vaapiapi lea e tatalaina i luga o le isi avanoa, e tutusa lelei ma le muamua ma isi mea uma. I le tauagavale
            ma le taumatau o le alatele, e lua tamaʻi kapoti laiti. I le taimi muamua, e mafai ona moe se tasi; i le isi, faamalie mea e manaʻomia e le tagata.
          </p>
        </div>

        <div class="engpar1">
          <p>
            The universe (which others call the Library) is composed of an indefinite and perhaps infinite number of hexagonal galleries, with vast air shafts between, surrounded by very low railings. From any of the hexagons one can see, interminably, the upper
            and lower floors. The distribution of the galleries is invariable. Twenty shelves, five long shelves per side, cover all the sides except two; their height, which is the distance from floor to ceiling, scarcely exceeds that of a normal bookcase.
            One of the free sides leads to a narrow hallway which opens onto another gallery,identical to the first and to all the rest. To the left and right of the hallway there are two very small closets. In the first, one may sleep standing up; in the
            other, satisfy one's fecal necessities.
          </p>
        </div>
      </div>

我做了一些搜索，我看到了一些可能对我有帮助的Javascript？但我不确定我写的是否正确，因为当我尝试时，它也不起作用。 

    var engpar1call = document.getElementsByClassName(".engpar1call");

function showengpar1() {
    var engpar1 = document.getElementsByClassName(".engpar1");

    engpar1.style.display = "inline";
}
engpar1call.addEventListener("mouseover", showengpar1);

最佳答案 

 $('.engpar1call').hover(
  function(){$('.engpar1').css('display', 'block')}, 
  function(){$('.engpar1').css('display', '')}, 
);
 .content {
  color: black;
  font-size: 10vh;
  font-weight: 700;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 2.5rem;
  grid-template-rows: 1;
  text-align: left;
}

.engpar1 {
  font-size: 10vh;
  font-weight: 700;
  grid-column: 2;
  grid-row: 1;
  display: none;
  transition-duration: 0.5s;
}

span.engpar1call {
  color: #D93636;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="content">
        <div class="transpar1">
          <p>
            O le atulaulau (lea e taua e le isi o le Potutusi) o se numera e le mafaitaulia ma atonu e le iʻu o fale o le hexagonal, faatasi ai ma le tele o 
<span class="engpar1call">vaalele</span> i le va, e siʻosiʻomia e nofoaafi maualalo. Mai soʻo se tasi
            o le hexagons e mafai e se tasi ona vaʻavaʻai, vavalalata, pito i luga ma lalo. O le tufatufaina o faletusi e le mafai ona faʻaaogaina. Luasefulu fata, lima fata uumi i le tasi itu, ufiufi uma itu sei vagana ai lua; latou maualuga, o le mamao
            mai le fola i luga o le taualuga, e toetoe lava a sili atu nai lo se tusi tusi masani. O se tasi o itu saoloto e tau atu i se ala laupapa vaapiapi lea e tatalaina i luga o le isi avanoa, e tutusa lelei ma le muamua ma isi mea uma. I le tauagavale
            ma le taumatau o le alatele, e lua tamaʻi kapoti laiti. I le taimi muamua, e mafai ona moe se tasi; i le isi, faamalie mea e manaʻomia e le tagata.
          </p>
        </div>

        <div class="engpar1">
          <p>
            The universe (which others call the Library) is composed of an indefinite and perhaps infinite number of hexagonal galleries, with vast air shafts between, surrounded by very low railings. From any of the hexagons one can see, interminably, the upper
            and lower floors. The distribution of the galleries is invariable. Twenty shelves, five long shelves per side, cover all the sides except two; their height, which is the distance from floor to ceiling, scarcely exceeds that of a normal bookcase.
            One of the free sides leads to a narrow hallway which opens onto another gallery,identical to the first and to all the rest. To the left and right of the hallway there are two very small closets. In the first, one may sleep standing up; in the
            other, satisfy one's fecal necessities.
          </p>
        </div>
      </div>

关于javascript - Span 悬停不起作用以及如何更改 div 外部元素的属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60274740/

24 4 0
文章推荐： javascript - Momentjs 格式 : apply italic text styling
文章推荐： javascript - 在 Angular 中使用 debounceTime
文章推荐： javascript - 如何使用 jspdf-autotable 打印四个不同的表格
文章推荐： javascript - 递归函数在深度比较期间返回差异的路径
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com