Is it possible to combine two conditions using CSS?

Hello, I have a question about CSS.

In my navigation bar, I have 3 links with different styles:

    #p1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 45px;
    font-weight: bolder;
    color: #999999;
    text-decoration: none;
}

The first link shows the current location of the user. For the other two links, I have defined these styles:

    #p2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 45px;
    font-weight: bolder;
    color: #ECECEC;
    text-decoration: none;
}
#p2:hover {
    font-weight: bolder;
    color: #999999;
    cursor:default;
}
#p2:active {
    font-weight: lighter;
    color: #999999;
}

Now, I would like to change the color of p1 when the user hovers over p2. Is this possible?

Thank you in advance for your help.

Here is the HTML structure:

<div id="nav">
      <div id="link"><p1>link1</p1></div>
      <div id="link"><p2>link2</p2></div>
      <div id="link"><p2>link3</p2></div>
      <div id="link"><div id="login"></div></div>
    </div>
htmlcsscss-selectors

Answer №1

You won't achieve this using only CSS.

One way to accomplish it is by incorporating javascript to modify the color of #p1 when #p2 is hovered over.

Alternatively, you could opt for Sass to assign the color of #p1 to a variable and alter the value of that variable when #p2 is being hovered. However, I have not tested this method myself. Keep in mind that Sass isn't purely CSS as it relies on javascript as well.

If you choose to go with javascript (using jQuery library), the code would look like:

$("#p2").hover(function() {
  $("#p1").css('color', '#f23');
});

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

Steer clear of downloading images while on your smartphone

As I develop a responsive website, I encounter the challenge of optimizing image loading based on viewport size. While using CSS to hide images not needed for certain viewports can reduce display clutter, it does not prevent those images from being downloa ...

javascripthtmlcssresponsive-designcross-browser

Is it possible to target a specific element within one of two classes that share the same name using CSS or XPath in Webdriver.IO?

Currently, I am using Webdriver.io and facing a challenge in selecting an element within the "text-fields-container" class. This particular element happens to be a password field, and both classes share the same name. Can someone guide me on how to go abou ...

cssselenium-webdriverxpathwebdriverwebdriver-io

My line occupies an excessive amount of vertical space

Working on a practice website and realizing my CSS skills are a bit rusty. Struggling with the height of a row in my container, as it's taking up too much space. Also, having trouble positioning the second row below the first one without it ending up ...

htmlcssbootstrap-4

What is the best way to ensure that a navbar dropdown appears above all other elements on

I'm having trouble creating a navbar dropdown with material design. The dropdown is working fine, but the issue I'm facing is that other elements are floating above it. https://i.stack.imgur.com/aJ0BH.png What I want is for the dropdown to floa ...

javascripthtmlcssmaterial-ui

Cascading Style Sheets variable and Sassy CSS mixin

I'm facing a challenge involving the use of CSS variables in conjunction with my VueJs app. The goal is to make a hover effect (changing background-color) customizable by the application, while having a default value set in a nested SCSS map using the ...

cssvue.jssassscss-mixins

Steps for transferring data between two components

I'm looking for a way to transfer an object's id from one component to another. <ng-container matColumnDef="actions"> <mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-cell *matCellDef="let user"> ...

htmlangulartypescriptangular-material

AJAX Username verification failing to validate

Working with PHP and MySQL, I created a basic form which includes a textfield for the username and a submit button. The page is named checkusername.php. Additionally, I implemented an AJAX function for handling this process. Subsequently, there is another ...

javascriptphpmysqlajaxhtml

Unable to modify the background image of a div using jQuery

I'm encountering an issue in my script where I tried to implement an event that changes the background-image of a div when a button is clicked, but it's not functioning as intended. Below is the code snippet: HTML <div class="col-md-2 image ...

javascripthtmljquerycss

Video HTML autoplay feature malfunctioning

I have been attempting to use the <embed> tag in order to showcase a video on my webpage. However, I have encountered an issue where the video begins playing automatically when the page loads. In an effort to remedy this situation, I included autost ...

htmltagsembed

determining the perfect size of a container by analyzing its content

Displayed here is a snapshot of content included in form validation for a website project that's currently in development: The content is currently situated within a div element with its width set to 20%. Initially, without this rule, the div spanned ...

css

Displaying a div when hovering over it, and keeping it visible until clicked

I want to display a div when hovering over a button. The shown div should be clickable and persistent even if I move the cursor from the button into the shown div. However, it should be hidden when moving out of the entire area. I'm unsure about how ...

javascriptjqueryhtmlcss

CSS HTML parent div cannot contain image properly

Creating a website using Bootstrap: <div class="row padding_zero"> <div class="col section px-0"> <img class="img-trans padding_zero" src="./svg/clouds-00.svg" style="margin-top: -150px& ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to incorporate multiple HTML buttons that utilize the same JavaScript function within looped results?

My HTML page contains the following codes: <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="metin" placeholder="Geben Sie Artikel Nr" style="width: 30%;"/><br/><br/> <input type="button" class="sin ...

javascriptphpjqueryhtmlforms

Creating a new row does not result in the creation of a new span displaying the character count message

Every description field should have its own character counter, with different SpanIDs displayed in respective SpanIds for each new row. How can this be achieved? <div class="row"> <div class="col-s ...

javascripthtmljquerysharepoint-2013

The jQuery fade speed effect has a limitation where it can only be utilized

When a specific link is clicked, I want a div to display with a fadeIn effect and then fadeOut when the link is clicked again. However, after the first click following an HTTP request, the fadeIn works but the fadeOut does not (the div closes though). More ...

jquerycss

What is the best way to display a date picker from a different page as a pop-up when a button is clicked on the current

Chapter One <button class="btn btn-outline-primary btn-sm btn-block " >Place order</button> Chapter Two <button class="simplepicker-btn" >Show Date Picker</button> > <script> > let simplepicker = new SimpleP ...

javascriptjqueryhtml

Looking to design an interactive grid for generating dynamic thumbnails

I am a beginner in the field of web development and I have a desire to create a website for showcasing my portfolio. This website should feature project thumbnails along with brief descriptions, all of which should be displayed dynamically. Although I poss ...

phpjavascriptjqueryhtmlcss

Creating a loading mask for a section of a webpage using angularjs

How can I implement a loading mask/image for a $http request that loads data for a <select> tag on my webpage? I want the loading mask/image to only cover the specific section of the page where the data is being loaded. Here's the HTML code: & ...

cssangularjs

Identifying collisions or contact between HTML elements with Angular 4

I've encountered an issue that I could use some help with. I am implementing CSS animations to move p elements horizontally inside a div at varying speeds. My goal is for them to change direction once they come into contact with each other. Any sugges ...

cssangulartypescriptanimation

Place the menu on top of the div by adjusting the z-index

Hey there, I'm working on a project and I need help with an issue. You can check out the example page here: If you try to open the menu and click between "list" and "new ads", you'll notice that you're actually clicking on the dropdown se ...

css