I'm having an issue with the code below that is supposed to keep the selected link highlighted, but it only flashes the green color on click. Can someone help me figure out what's going wrong here?
#sidebarContent a:active{
background-color: green;
}<div id="sidebarContent">
<ul>
<li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li>
<li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li>
</ul>
</div>To change the color, you need to set foucs since there is no link on href.
#sidebarContent a:active , #sidebarContent a:focus{
background-color: green;
}<div id="sidebarContent">
<ul>
<li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li>
<li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li>
</ul>
</div>Utilize the :hover pseudo-class to add highlighting effect:
#sidebarContent a:hover{
background-color: green;
}<div id="sidebarContent">
<ul>
<li style="margin-bottom:10px"><a style="outline:none" href="#">Manage</a></li>
<li style="margin-bottom:10px"><a style="outline:none" href="#">Links</a></li>
</ul>
</div>#sidebarContent a:focus{
background-color: blue;
}<div id="mainSidebar">
<ul>
<li style="margin-bottom:15px"><a style="outline:none" href="#">Create</a></li>
<li style="margin-bottom:15px"><a style="outline:none" href="#">Profiles</a></li>
</ul>
</div>Make sure to adjust your css. For example:
<style>
/* unvisited link */
a:link {
background-color: red;
}
/* visited link */
a:visited {
background-color: green;
}
/* mouse over link */
a:hover {
background-color: hotpink;
}
/* selected link */
a:active {
background-color: blue;
}
</style>
Here is the structure of my project: Sil -> css -> js -> clients -> index.php -> response.php index.php I am facing an issue related to the folder 'clients'. My website URL can have different va ...
How can I use data collected by Javascript to generate an email in PHP? The array structure in JavaScript is like this: Menu[ item(name,price,multiplier[],ingred), item(name,price,multiplier[],ingred) ] The array Menu[] is dynamically cr ...
My goal is to make each div with the class .edit editable by adding the contenteditable property: $(document).ready(function() { $(".edit").attr("contenteditable", "true"); }); However, after applying this, I found that clicking on a div with content ...
Creating a ul as input is my goal, similar to this example on jsfiddle: http://jsfiddle.net/hailwood/u8zj5/ (However, I want to avoid using the tagit plugin and implement it myself) I envision allowing users to enter text in the input field and upon hitt ...
After consideration, I have decided to avoid using a JavaScript solution for my problem. The only way it seems to work consistently is by using setInterval() at regular intervals, which I prefer not to do. I am aware that achieving the same effect with CSS ...
Initially, the code has been streamlined to include only the necessary components. Here is the HTML file (single_lesson.html) in question: <tr class="my_lessons"> <td> <select name="my_von" id="my_von"></select> &l ...
Currently, I am utilizing a currency conversion Web Service and I have implemented a Javascript function to display the result upon clicking a button. However, I would like this Javascript function to execute automatically when the page loads. Here is the ...
Is there a way to design something similar to this layout using Material UI? I'm looking to create a selection between fields. Any advice on how to achieve this in Material UI? ...
Previously, I inquired about a similar issue but have not come across any solutions. I made updates to my code, which is now functioning well, however, I am facing a new dilemma. Here is the PHP code I am currently working with: class individual { pu ...
Once the asynchronous request is complete, I dynamically add a new element to the top with this code snippet: Array.prototype.unshift.apply(scope.conversation, conversation.data.message); The issue arises when the added element causes the scroll position ...
One interesting challenge I'm facing involves a textarea that stores dynamic HTML content within paragraph (p) tags. Initial HTML: <textarea rows='7' class='form-control' id='comments'><p>My variable HTM ...
Is there anyone out there with experience in making a Node push function work on nested objects beyond just one level? I'm looking to delve deeper into a second id within the DB model. // Functional code for updating a user at one level with one id ...
The code provided by someone else is working perfectly fine. However, when I try to rename the attr method, for example to attrx, I encounter an error. The error message I receive after renaming the method is: TypeError: arg.attrx is not a function Below ...
When making an ajax call to "updateUser," the following code is executed: puts session[:user_id] user = User.find(params[:user_id]) if user session[:user_id] = user.id session[:user_name] = user.first_name + " " + user.last_name puts session[:user_i ...
How can I create a ribbon for a gift box using three.js, similar to the example shown here: Is it possible to create the ribbon with just one piece or do I need multiple pieces to achieve the desired look? Thank you :) ...
Upon examining the script, you'll notice the interval() function at the very bottom. The issue arises from bc-(AEfficiency*100)/5; monz+((AEfficiency*100)/5)((AFluencyAProduct)/100); For some reason, "bc" and "monz" remain unchanged. Why is that so? T ...
I'm attempting to automate the process of uploading a file using python. However, when I run the code below with python selenium, an error is thrown. I even added a 10-second wait to prevent synchronization issues. driver.execute_script('window ...
I've been trying to use CSS to style my <h1> element in a specific way, but it seems the default browser behavior is getting in the way: Despite my efforts, the browser continues to display it like this: Anyone have any suggestions on how I ca ...
I am curious about adjusting the height of a div based on its content. In this case, I have the following HTML structure: div.Pantalla { background-image: url("https://cdn.pixabay.com/photo/2015/07/11/23/02/plane-841441_1280.jpg"); background-size ...
npm http 200 https://registry.npmjs.org/weak/-/weak-0.2.2.tgz npm http GET https://registry.npmjs.org/bindings npm http 304 https://registry.npmjs.org/bindings > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8dfcdc9c3e898 ...