- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
有没有办法让我将鼠标悬停在跨度文本(“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/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!