Is there a way to create spoiler text on a website using HTML and CSS?
I'm looking to have text appear in black with a black background, but when it's hovered over, the text turns white, becoming visible.
For example:
<span style="color: black; background: black;">test</span>
<p>Then when hovered over</p>
<span style="color: white; background: black;">test</span>The <details> HTML element was specifically crafted for this purpose. Here is an illustrative example taken from the MDN reference. This tag is compatible with all modern browsers, although it does not work on Internet Explorer.
<details>
<summary>Details</summary>
Something that might go unnoticed by a casual observer.
</details>.hidden-text, .hidden-text-2, .hidden-text a, .hidden-text-2 a{
color: black;
background-color: black;
}
.hidden-text:hover, .hidden-text a {
color: white;
}
.hidden-text-2:hover, .hidden-text-2 a {
background-color:white;
}<span class="hidden-text" >test <a href='#'>with link</a> </span>
<p>Then when hovered over <a href='#'> outside link</a> </p>
<span class="hidden-text-2"> other test <a href='#'>with link</a> </span>Reminiscent of the hidden content feature found in comments on Disqus.
.spoiler{
background-color: gray;
color: transparent;
user-select: none;
}
.spoiler:hover{
background-color: inherit;
color: inherit;
}<h3>In the book, <span class="spoiler">the main character is actually a ghost.</span></h3>I've come across forums where spoilers are hidden behind toggle buttons instead of just being visible text.
It's a neat feature that allows users to reveal the content only if they choose to do so.
I'm considering adding a hidden section to my website to conserve space.
https://jsfiddle.net/clarle/bY7m4/
This solution seems to fit my requirements perfectly.
<div class="forum-post">
<a href="#hide" class="hide btn" id="hide">Show spoiler</a>
<a href="#show" class="show btn" id="show">Hide spoiler</a>
<div class="spoiler">
<p class="spoiler-content">People die when they are killed!</p>
</div>
</div>
.spoiler {
display: none;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .spoiler {
display: inline;
}
/* Additional CSS styles for aesthetics */
body {
margin: 0;
padding: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #FFFFFF;
}
.btn {
// Styling properties...
}
.forum-post {
padding: 20px;
border: 1px solid #000;
}
.spoiler-content {
padding: 15px;
}
Hey there, I've been working on a website using Python and Flask, and it's been going well so far. But now I've encountered a problem when trying to implement a login feature for the site. I have set up logic to authenticate users and redi ...
I have an HTML page with a form, and I want to display a specific div when the form is successfully submitted. The div code is as follows: <div class="response" style="display: none;"> <p>You can download it <a href="{{ link }}">here&l ...
When I turn an image into a link, why does it always seem to display a tiny black line to the right of the image? ...
Can someone assist me with the white strap at the bottom of this site found on website? It seems to be powered by wordpress. ...
I have completed the necessary steps to integrate Bootstrap 5 SASS into my ASPNET Core project. To begin, I right-clicked on the wwwroot directory and selected Add->Client-Side Library. From there, I chose the unpkg provider and added the <a href="/ ...
const useRowStyles = makeStyles({ root: ({ open }) => ({ backgroundColor: open ? "#F5F6FF" : "white", backgroundOrigin: "border-box", spacing: 8, "& > *": { height: "64px", ...
Is there a way to change the grid position when we minimize the screen? For example: <div class="row"> <div class="col-lg-6 -col-sm-12 col-xs-12"> <img src="http://placehold.it/350x150">//first image </div> <div class ...
I have three divs with dynamic content, and I want the height of all three to always be the same. Here is the code for the three divs: <div class="boxcontent3"> <div class="whitebox3"> <div class="whiteboxdemocont"> ...
Is there a way to prevent the context menu from appearing in jQuery when the text box is disabled? The right-click disable functionality works well in all browsers except for Firefox. Please note that the right-click disable functionality works when the t ...
Having trouble vertically aligning a plus image in the center of a circle button? I can't seem to make it work without adjusting margins. Is there a more Bootstrap-friendly way to achieve this? Below is the code snippet: .btn-circle { backgroun ...
My code includes multiple arrays with values structured like this : Array ( [0] => Array ( [NAMA_MDS] => AGUNG RUDIYANTO [Call] => 182 [RO] => 151 [NAMA_SGRUP] => Kanzler Singles ...
*{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } body{ font-family: montserrat; } nav{ height: 85px; width: 100%; z-index:1001; } lab ...
Check out the JSfiddle link here for the full code. I'm having trouble with my slider as the last picture keeps collapsing underneath and is not hidden as it should be. I suspect this issue is causing the slider to malfunction. HTML <div class=" ...
I am attempting to achieve this layout using CSS: The margin between each element is set to 10px. The height of the textarea is 100px and the width is 150px This snippet shows some HTML code for your reference: main form label { ...
Currently, I am utilizing an input with mat-autocomplete to choose an option from a list of objects (each object contains ID, name, surname, etc.). My goal is to have the formControl's value represent the entire object rather than just the name. This ...
HTML <ul class="ul_nav"> <li ng-repeat="teams in teamArray" style="-webkit-animation-delay: {{$index * 150}}ms"> {{teams.team_name}} </li> </ul> In this section, I am able to sh ...
One of my HTML elements has a knockout binding on Tap <a class="scroll icon-arrow-down" data-anchor="#part" data-bind="localizedText: { id: '4-anchor-1', html: true }, tap: controller.scrollTo.bind(controller)"></a> The code snippet ...
I am struggling to set a background image that fits the entire screen. It looks great on Windows, but when I view the same page on my mobile device (specifically Android using Google Chrome), the image zooms in and out oddly. Additionally, there seems to b ...
One of the challenges I am facing involves a webpage with multiple submit buttons. My goal is to iterate through each button and click on them one by one. While I am aware that this can be achieved using xpath like this (//button[@class='submit' ...
After reading various tutorials and guides online, I managed to set up a login screen. You can view the code in my jsfiddle: Jsfiddle. Unfortunately, I am facing issues with making the code function correctly. Being new to Jquery, I might have made a begin ...