Hover effect on two divs changing states

I was so close to solving this issue, but I'm stuck on the final part. Here's the code snippet I've been working on:

/* valuecanvas */

#wrappercs {
  margin-top: 3px;
  width: auto;
  height: auto;
  display: block;
  float: right;
  background: url(http://i67.tinypic.com/30ayjhg.jpg);
  border: 2px solid;
}

#valuecanvas2 {
  width: 640px;
  height: 297px;
  background: url(http://i65.tinypic.com/2kfu6f.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  padding: 0px;
}

... (code continues)


<div id="wrappercs">
  <ul id="valuecanvas2">
    <li id="gains2"></li>
    <li id="jobs2" ></li>
    <li id="pains2" ></li>
    <li id="gainscreaters2"></li>
    <li id="services2"></li>
    <li id="painreleavers2"></li>
 </ul>
</div>

Here is a link to my JSFiddle where you can see the code in action.

I noticed that when hovering over "gains", the transition works for "gainscreators" as well, but it doesn't work the other way around. I removed the #gains2:hover ~ #gainscreaters2 but still didn't have any success. Is there something I might be overlooking?

htmlcss

Answer №1

When trying to style preceding elements with CSS, it is not possible. Instead, you can wrap both elements inside another ul and assign an id as shown below:

HTML:

<div id="wrappercs">
  <ul id="valuecanvas2">
    <li>
      <ul id="gainsAnimation">
        <li id="gains2"></li>
        <li id="gainscreaters2"></li>
      </ul>
    </li>

    <li id="jobs2" ></li>
    <li id="pains2" ></li>
    <li id="services2"></li>
    <li id="painreleavers2"></li>
   </ul>
</div>

CSS: 

/* Gains + gainscreaters */

#gains2 {
    background:url(http://i64.tinypic.com/j73t55.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 245px;
    height: 143px;
    left: 338px;
    top: 7px !important;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}
#gainsAnimation:hover #gains2 {
    background:url(http://i65.tinypic.com/14433ad.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 245px;
    height: 143px;
    left: 338px;
    top: 7px !important;
     -webkit-transform: translate(-15px, -20px);
    -moz-transform: translate(-15px, -20px);
    -o-transform: translate(-15px, -20px);
    -ms-transform: translate(-15px, -20px);
    transform: translate(-15px, -20px);
}
#gainsAnimation:hover #gainscreaters2{      
    background:url(http://i64.tinypic.com/micsw5.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 286px;
    height: 139px;
    left: 16px;
    top: 7px !important;
     -webkit-transform: translate(15px, -15px);
    -moz-transform: translate(15px, -15px);
    -o-transform: translate(15px, -15px);
    -ms-transform: translate(15px, -15px);
    transform: translate(15px, -15px);
    }
#gainscreaters2 {
    background: url(http://i67.tinypic.com/imqgx4.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 286px;
    height: 139px;
    left: 16px;
    top: 7px !important;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}

Fiddle: https://jsfiddle.net/tjjc4vxo/1/

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

Place the Div directly above a distinct Div

Hey there! I'm currently working on positioning one div on top of another div programmatically (using javascript or css). These divs are completely separate and have the following structure: <div class="bottom"> <img src="image"></i ...

javascripthtmlcss

Adding to a webpage's URL with PHP prior to rendering the content

Currently, I am investigating how to add a random query string at the end of a URL when someone visits my page for the first time. Let's say an individual goes to my website at www.example.com. If everything proceeds as planned, they will land on my i ...

phphtmlurl

Python's selenium did not locate the specified CSS element

After transferring the code from Selenium IDE to Python, the selenium test was functioning properly except for clicking on the item and scrolling clicks smoothly on an item. Here is the HTML selenium code: <?xml version="1.0" encoding="UTF-8"?> ...

pythonhtmlcssseleniumxpath

Connecting JavaScript and HTML in EclipseWould you like to know how to link

After completing the Rock Paper Scissors exercise on Codecademy, I wanted to transfer it to my Eclipse IDE. The code worked perfectly on the Codecademy platform, so I copied everything and created a .js workspace in Eclipse to paste it there. Now, my ques ...

javascriptjqueryhtmleclipseide

SVG text tags displaying Russian characters incorrectly

Upon visiting my website, I noticed that the Russian text within the SVG is not displaying correctly in certain browsers. Here is the code snippet causing the issue: <g> <rect id="XMLID_2_" x="409.1" y="102.3" transform="matrix(0.7071 -0.7071 ...

htmlsvgcharacterfont-face

Once you address a block using jQuery

$(function(){ $(window).scroll(function () { var scrollVal = $(this).scrollTop(); var adscrtop =$(".header").offset().top // 在 RWD 767以下不作動 if(window.screen.width>767){ if(sc ...

javascriptjquerycss

Having difficulty uploading files using FormData in JavaScript, as $_FILES is returning empty

I have implemented a file upload feature to my server using JavaScript, but I am facing an issue with certain jpeg/png files where the $_FILES and $_POST variables are empty. Despite trying various solutions, I haven't been able to resolve this issue. ...

javascriptphpjqueryhtmlajax

Can someone explain why the min-width property is not being respected by the <input> element?

Visit this link for the code The text field in the provided link should only be 10px wide but it is currently displaying a width of 152px. Here is the code snippet: .input { width: 100%; box-sizing: border-box; } .cont { padding: 2px; } .main ...

htmlcss

button that takes you back to the top of a mobile website

I want to customize the Scroll To Top button so that it only appears once the user begins scrolling down, rather than always being visible even when at the top of the page. Just a heads up, I don't have much experience with JavaScript, so I might need ...

javascriptjqueryhtmlcss

Bootstrap dropdown menu experiencing functionality issues

I am facing an issue with implementing the javascript bootstrap file in my project. The dropdown menu is not working as expected even though I have saved bootstrap to my project folder. I have tried looking at other example codes and even copied and paste ...

javascripthtmltwitter-bootstrap-3

Experiencing excessive CPU usage while utilizing a progress bar in Angular

Whenever I try to load a page with 2 progress bars, my CPU usage goes through the roof... I decided to investigate and found that once I removed them, the site's speed improved significantly. Here's a code snippet of one of the progress bars: ...

javascripthtmlcssangularjstwitter-bootstrap

Tips for resolving the "Forbidden compound class names" error that occurs when trying to select an input field

As a newcomer to selenium, I am eager to start testing the login page. The text field below is where I need to input the username: <div class="WODM WNDM" data-automation-id="userName"> <div class="gwt-Label WBEM">Email Address</div><i ...

pythonhtmlselenium

Update the text with jQuery and AJAX

I've written a script using jQuery and AJAX to change my button text from "Approve" to "Approved." However, I'm facing an issue where clicking on one row changes the button text for all rows. Here's the code for my button: <td> & ...

jqueryhtmlajaxpost

Utilizing ng-class with Boolean values in AngularJS

On my page, I have a pair of buttons that control the visibility of elements using ng-hide and ng-show. <a ng-click="showimage=true" ng-class="{ 'activated': showimage}" class="button">Images</a> <a ng-click="showimage=false" ng-c ...

javascriptcssangularjs

Responsive tables in Bootstrap 4 that are nested

I am currently utilizing Bootstrap 4. I have a complex table structure where I want only the second column and onward to be scrollable. The challenge is making this specific part of the table responsive while keeping the rest static. I attempted to nest a ...

htmlcssbootstrap-4

Struggling to extract the values from a KendoDropDown using Selenium

When using the selenium web driver, we are trying to retrieve a set of option values such as Last 30 days, Last 60 days, etc. Attempts have been made to locate these elements using a CSS selector. var timeperiodcss = "span.k-widget.k-dropdown.k-header se ...

cssseleniumselenium-webdriverdrop-down-menukendo-ui

Count characters in multiple text inputs with AngularJS

Currently, I am developing an Angular JS application with the help of Angular-UI (bootstrap). In this app, there are multiple input boxes where users can enter data, which is then displayed in a div. My goal is to have a character count that applies to al ...

htmlangularjstwitter-bootstrap

Setting limits to disable or remove specific times from the time picker input box in Angular

I'm having trouble with a time input box. <input type="time" min="09:00" max="18:00" \> Even though I have set the min and max attributes to values of 09:00 and 18:00 respectively, it doesn't seem to be working properly. I want to ...

javascripthtmlangulartypescript

Padding-left may cause text to not wrap correctly

Every link in the left menu has a padding-left: 15px;. This is done to accommodate a background image (the blue arrow). However, when text wraps (like in "Paintings, prints, and watercolours"), it seems to ignore the padding. I've searched extensive ...

htmlcss

NgMap Angular Pins

While working on implementing Ng-Map for Angular in my application, I encountered an issue. I am retrieving entries from the database and attempting to drop markers on the map. However, even though I have 40 entries, only the first 11 are showing up as m ...

javascriptangularjshtmlgoogle-maps