I would like to create a hover effect for the Major span element as illustrated in the image below. The desired outcome is for the span to transform into a story span upon hovering, complete with a bordered outline and an edit icon. I am looking for some CSS implementation to achieve this effect.
https://i.sstatic.net/mqQbh.png
My attempts so far:
span:hover {
border : 2px solid;
border-color : darkgrey;
cursor: pointer;
}<span> Active</span>This is a sample code snippet provided for demonstration purposes.
Font Awesome icons are utilized in this code for illustration.
div{
padding:5px 0px 5px 5px;
display:inline-block;
}
.fa.fa-pencil{
background-color:grey;
display:none;
padding:4px;
}
.fa.fa-angle-double-up{
display:none;
}
div:hover .fa.fa-pencil{
display:initial;
}
div:hover .fa.fa-angle-double-up{
display:initial;
}
div:hover .fa.fa-bookmark{
display:none;
}
div:hover{
border : 1px solid grey;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<i class="fa fa-bookmark"></i>
<i class="fa fa-angle-double-up"></i>
<span> Major </span>
<i class="fa fa-pencil"></i>
</div>I decided to showcase some random images in this example for you to review. Take a look at this code snippet and share your thoughts.
span:hover {
border : 2px solid;
border-color : darkgrey;
cursor: pointer;
vertical-align:top;
}
span img:first-child {
display: none;
}
span img:last-child {
display: none;
}
span:hover img:last-child {
display: inline-block;
width:14px;
border : 2px solid;
border-color : red;
background:gray;
}
span:hover img:first-child {
display: inline-block;
width:16px;
}<span> <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" />
Active<img id="edit" title="click to edit" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" /></span>span:hover{
border : 2px solid black;
background-color: yellow;
cursor: pointer;
}<span> Hover me</span>I am looking to implement a form that includes an option to upload files by selecting "choose file". However, I want to restrict the displayed files to only show .epub and .mobi files when the user opens the selection pop-up box on their operating system. ...
Creating a website that allows users to login and view various complaint forms from government websites or other sources. When a user clicks on a link to file a complaint, they will be redirected to the respective page. However, I am looking for a way to ...
TS Component ngOnInit() { if(somecondition) // The line of code that is causing issues this.openModal(#tempName); } HTML Component <ng-template #tempName> Content goes here! </ng-template> this.openModal(#tempNa ...
Trying to understand how the viewBox attribute works in SVG, but the code below is confusing me. Can someone please explain if this is a bug or the expected behavior of SVG? I can't seem to figure out what I'm doing wrong... <svg class="s ...
I am dealing with a situation where I have 2 pages. The first page contains a div called 'ajaxicall', which loads another page inside it. The challenge I am facing is figuring out how to close the second page when I click on the "close" button w ...
Is there a way to display the unread message count as text on my PNG image? You can find the image at header: span Messages =image_tag "login_icon6.png", class: 'img4' Unread count code: = current_user.mailbox.inbox(:unread =& ...
I'm having trouble receiving a list of items that match with my array of ids. Here's a snippet from the Angular component code: this.orderService.getSpecyficOrders(ids) .subscribe(orders => { ... Where ids is an array of [{_id : ID }, ...
I am in the process of developing a mobile app that allows users to answer questions in a questionnaire. Once the questionnaire is completed, the user can save it in LocalStorage. Upon revisiting the page, the user will see all previously answered question ...
I recently upgraded my ASP.Net Angular 4 project to the latest version of Angular. To achieve this, I used the following commands: npm install -g npm-check-updates ncu -u After updating, I reopened my project and checked the packages.json file to confirm ...
I need a solution for extracting only the text that is visible to the user on a web page, even if there is more content hidden due to CSS styling. Using the standard method driver.find_element_by_css_selector('span#value1').text retrieves the en ...
Can we create "named blocks" in a different way? For instance, {{#customBlock "repeatableBlock"}} {{!-- block containing numerous properties and data that may become messy if hardcoded multiple times --}} {{/customBlock}} Then, elsewhere in the code, {{ ...
I am attempting to grasp the functionality of CSS display property and experimented with this basic HTML code: <div> <form className="container" action=""> <input name="fName" placeholder="First Name" type="text" value={props.fNam ...
Hey everyone, I’m a newbie in the world of web development and I recently put together something using bootstrap 5. If you want to check it out, here’s the link to my project on CodePen. I have a specific request though - instead of having icons displ ...
Can someone help me troubleshoot why ui-view is not working for ui-tab in my code? Here is what I am experiencing: On the customers page, I have a link that redirects to the update customer page when clicked. The link looks like this: http://localhost:300 ...
My request is as follows: I have multiple boxes displayed on a webpage, each containing clickable divs and text. When a user clicks on a clickable div, an alert should appear confirming the click. Clicking on the text itself should not trigger any action. ...
Is there a way to implement the following border style in a Material Design Table: border-collapse: collapse; I tried adding a border to .mat-cell: .mat-cell { border: 1px solid; } However, in some instances, the border appears to be 2px. The reas ...
I am facing an issue with two divs that are supposed to be displayed side by side in a normal browser. However, when the browser window is resized, the first div loses its height and the second div overlaps into it. I attempted to set the body's min h ...
Is there a way to split a ul list into 3 columns using CSS? This is how my HTML structure looks like: <ul> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li> ...
Here's an idea I have in mind: Alan 12 | Byron 104 Alfred 54 | Charles 33 Ann 28 | Cleopatra 7 Basil 133 | Corey 199 ...
I am a newcomer to using angular-cli and I have a question regarding the installation of the npm library mdbootstrap. Following the guidelines provided here in the Angular CLI Instructions, I attempted to install mdbootstrap by executing the following step ...