Есть ли способ для меня навести курсор на текст диапазона («engpar1call») и отобразить на экране div с именем «engpar1»?
В моем файле CSS мое тело настроено так, что содержимое отображается в 2 столбцах; «transpar1» всегда виден слева, а «engpar1» должен появляться, когда пролет «engpar1call» находится над ним. Кажется, я не могу заставить работать: 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);