Do you Need something like this? I made it by jQuery.
$( document ).ready(function() {
$('.transpar1').find('.engpar1call').hover(function() {
$('.engpar1').toggleClass( 'fadein' );
});
});
.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;
color:#000;
}
.engpar1 {
font-size: 10vh;
font-weight: 700;
grid-column: 2;
grid-row: 1;
opacity:0; visibility:hidden;
transition: all .3s ease-in-out;
}
span.engpar1call {
color: #D93636;
}
.engpar1.fadein{opacity:1;visibility:visible;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>
Is there a way for me to hover on the span text (“engpar1call”) and have the div called “engpar1” appear on the screen?
In my CSS file, I have my body set up such that the content appears in 2 columns; “transpar1” is always visible on the left, and “engpar1” is supposed to appear when the span “engpar1call” is hovered over. I can’t seem to get the :hover to work, but I am able to style the span.
.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>
I’ve done a bit of searching, and I saw some Javascript that may be of help to me? But I’m not sure if I wrote it correctly because when I tried it, it wasn’t working either.
var engpar1call = document.getElementsByClassName(".engpar1call");
function showengpar1() {
var engpar1 = document.getElementsByClassName(".engpar1");
engpar1.style.display = "inline";
}
engpar1call.addEventListener("mouseover", showengpar1);
Thanks for clarifying that for me. I also tried it with querySelector() but that wouldn’t work as well. Am I missing something?
Check the snippet, if it helps.
