when an element is hovered over, it activates a reaction on a different element

I've been struggling with the Events assignment we were given. I tried writing my own code, but it had so many errors when I got it checked. I couldn't quite grasp all the explanations of what went wrong, so now I feel a bit embarrassed to share my attempts. That's why I'm reaching out for some help here.

My goal is to create an effect where hovering over a class "one" triggers a div with class name “sqt” to have a 10px dotted green border, a light green background, and font color #eca261 – similar to the image below.

<a class="one" href=#>First Link</a>
<a class="two" href=#>Second Link</a>
<br><br>
<div class="sqo">Div 1 here</div>
<br>
<div class="sqt">Div 2 here</div>

https://i.sstatic.net/DyntI.jpg

htmlcsscss-selectors

Answer №1

Behold, the following code snippet provides an explanation of CSS.

To delve deeper into a specific topic, take a look at this resource on the general sibling combinator.

/*
  This CSS code selects the sibling element with class name "sqt" when the element with class name "one" is hovered over.
*/
.one:hover ~ .sqt {
  font: #eca261;
  background: lightgreen;
  border: 10px dotted green;
}
<a class="one" href=#>First Link</a>
<a class="two" href=#>Second Link</a>
<br><br>
<div class="sqo">Div 1 here</div>
<br>
<div class="sqt">Div 2 here</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to implement a placeholder height for images on a webpage with varying heights using HTML

I'm facing an issue with an image on my website that has a dynamic width and height as defined by the following CSS: .sm_item_image { width:100%; height:auto; max-width:400px; } The problem arises when the image takes some time to load, ...

javascripthtmlcss

Adding additional text within the paragraph will result in the images shifting backwards when utilizing flexbox

It seems like there might be something obvious that I'm missing here, but essentially my goal is to create a footer with 2 columns and 2 rows. In each column, there will be an icon (32x32) and 2 lines of text next to it. The issue I'm facing is ...

htmlcssflexbox

Why does the parent URL become the origin for an AJAX request coming from an iframe?

I am facing an issue with a website where I need to load an iframe from a different subdomain. The main website is hosted on portal.domain.com, and the iframe is on iframe.domain.com. To make requests to iframe.domain.com from portal.domain.com, I decided ...

javascripthtmlajaxiframecors

Is there a variance in window.innerWidth between Chrome and Firefox?

body, html { position:absolute; width:100%; height:100%; margin: 0; padding: 0; overflow: hidden; } When using window.innerWidth, there is a discrepancy between the values returned by Firefox and Chrome. Firefox return ...

javascripthtmlcsswidth

Creating a centered and beautifully styled picture with a specific maximum size using React

I recently completed the development of a new website, which can be viewed at Upon inspection of the website, it is evident that the photo is not centered and appears too large on mobile phones. Despite my efforts to align it using various methods outline ...

javascriptcssreactjs

Steps to showcase a form on a webpage using a button

My webpage features an HTML table with a table navigation bar that allows users to add items or inventory. However, when the "add item" button is clicked, a form appears below the table instead of on top of it. I want the form to display itself right on to ...

javascripthtmlcssbootstrap-4

What is the best way to add hyphens between words in PHP code?

Here is the code snippet and the desired output: ('nice apple'),(' nice yellow banana'),(' good berry ') To achieve the desired output: ('nice-apple'),(' nice-yellow-banana'),(' good-berry ') ...

phpjqueryhtml

What is the process for creating a downloadable link or button?

Here's the scenario I'm dealing with: I have a dynamic website that includes a form with a "select" dropdown menu, followed by a link or button. When a user clicks on the link: If the selected option is "display," the data is shown using AJAX ...

javascriptjqueryhtmldownload

Creating a sidebar that remains fixed in place even as the page is scrolled down can be achieved by using CSS and positioning properties

I am looking to create a website with a specific layout design as shown in this image: https://i.stack.imgur.com/ndKcz.png The main focus is on making the sidebar (F/T container) function as a social network link, sticking to the right side of the page ev ...

javascripthtmlcss

Field for user input along with a pair of interactive buttons

I created a form with one input field and two buttons - one for checking in and the other for checking out using a code. However, when I submit the form, it leads to a blank page in the php file. What could be causing this issue? UPDATE After changing fro ...

javascriptphpjqueryhtml

Pagination of AJAX result on the client side using jQuery

My issue revolves around pagination in AJAX. I want to avoid overwhelming my search result page with a long list of returned HTML, so I need to split it into smaller sections. The Ajax code I am currently using is: $.ajax({ url: "getflightlist.php?pa ...

javascriptphpjqueryhtmlajax

How can I retrieve JSON data from an AJAX request on an HTML page?

How can I display my JSON data on an HTML page using this JavaScript code? $.ajax({ url : 'auth.json', type: "GET", dataType : "jsonp", success: function(result) { $.each(result, function(i, v) { // Loop through each record in ...

javascriptjqueryhtmlajaxjson

Header with a stable background image that adjusts responsively

While attempting to convert a PSD to HTML, I encountered a small issue. Please refer to the image below: https://i.sstatic.net/5KoIV.jpg As indicated by the red arrow, there is a blue background image in the header of the template! How can I add this bac ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a way for my website visitors to seamlessly download the font I use if it's not already installed on their devices?

I've chosen the unique font ff-clifford-eighteen-web-pro-1 for my website. I'm looking to ensure that all text is consistently displayed in this font, even for users who may not have it downloaded on their device. Is there a way to make this hap ...

htmlfontscss

Show picture depending on the button pressed

Is it possible to only display the selected image? I have a set of buttons that allow customers to customize an image. For example, the user selects a shape like a circle, which is then displayed. The next step involves selecting a pattern to display insi ...

javascriptjquerycsshtml

Any suggestions on how I can make my modal stand out more?

I'm having trouble getting the modal to show up in this HTML file. Do I need to add something here or somewhere else? Do I also need to write a button onclick function? The modal should display when the "delete" button is clicked. <div class=" ...

htmlangularbootstrap-5

Populate the browser screen with a series of unpredictable numbers

I'm looking to fully populate the visible window of a webpage with random numbers. My current approach involves generating a long string of random digits first, and then applying the following properties to a div: #mydiv{ font-family: "Inconso ...

javascriptcss

Interacting with blog posts through comments on both Facebook and the blog's official page on the social media

I'm currently working on a PHP blog and I am looking to integrate Facebook comments into each blog post. My goal is for these comments to be visible both on the website and on its corresponding Facebook page, allowing users from different platforms to ...

phphtmlfacebookfacebook-comments

Enable sidebar navigation exclusively for mobile and iPad devices

Is there a way to implement a different navigation bar specifically for mobile devices like iPads? I'm considering using this one: Here is the source code: JSFiddle If anyone knows how to achieve this, please share! <link rel="shortcut icon" typ ...

jquerycsstwitter-bootstrapsidebar

Instructions on how to add an ExternalLink to a webpage linking back to the previous page

I'm in the process of creating an error page for my app, and I'm trying to figure out how to add a Wicket ExternalLink that takes users back to the previous page. I believe I need to store the parameters or entire URL of the last visited page, b ...

javahtmlhttpweb-applicationswicket