0

The way to affect another element on hovering on an element is apparently with a sibling selector, but I have a shape which is nested in a div to make it a triangle, from this thread: Hover and click on CSS triangle

I cant put my other element (the background image) in that div because it ruins it, but if I have it outside it, its not a sibling anymore.

<div class="sprite1"> </div>

<div class="box"> 

<div class="tria"> </div>
<!-- <div class="sprite1"> </div> -->
</div>

    .sprite1 {
    background: url('https://puppydogweb.com/gallery/puppies/beagle.jpg') no-repeat;

}

.sprite1 {
    background-position: -43px -38px;
    width: 304px;
    height: 318px;
}
.sprite1:hover {
    background-position: -43px -72px;
    width: 304px;
    height: 319px;
}

.box {
  width: 40%;
  padding-bottom: 28.2842712474619%; /* = width / sqrt(2) */
  position: relative;
  overflow: hidden;
}
.box .tria  {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 122, 199, 0.7);
  transform-origin: 0 100%;
  transform: rotate(45deg);
  transition: background-color .3s;
}

.tria:hover {
               background: rgba(255, 165, 0, 0.7);
}
.tria:hover ~ .sprite1 {
    background-position: -84px -438px;
    width: 122px;
    height: 48px;
}
.tria:hover + .sprite1 {
    background-position: -84px -438px;
    width: 122px;
    height: 48px;
}
.tria:hover > .sprite1 {
    background-position: -84px -438px;
    width: 122px;
    height: 48px;
}
.tria:hover .sprite1 {
    background-position: -84px -438px;
    width: 122px;
    height: 48px;
}

Fiddle: https://jsfiddle.net/csskg4t9/2/

Also I really dont want to use Javascript.

If anyone can direct me to a resource about css children and parents that would be appreciated. I dont know the terminology so its hard to look up.

o0o0o0o0o
  • 89
  • 1
  • 11

1 Answers1

0

You are correct, the only way to do this with CSS is with sibling selectors. Looking at your HTML, your triangle DIV <div class="tria"></div> doesn't have any siblings because it is the only child element of its parent DIV <div class="box"></div>

You could change the sibling selector to the <div class="box"></div> because its on the same level as the DIV you want to effect. Only issue being sibling selectors can only select elements further down the DOM, it cannot select previous elements, so you would need to re-order the html, so something like:

<div class="box"> 
    <div class="tria"></div>
</div>
<div class="sprite1"></div>

Then a selector like:

.box:hover + .sprite1 {
    /* Styles here */
}
James King
  • 1,897
  • 11
  • 16
  • Yeah I know that, but if I do it like that, the hover will trigger if its over the box and not just the triangle, which is the point of the triangle. Isnt there a way to make the triangle and the image siblings without having to put them both inside the box div? I tried putting a div class around the image and the .triangle but that does nothing to make them both children of it but it didnt work. – o0o0o0o0o Jan 12 '17 at 10:29
  • You can't do it with pure CSS, you'll need JS – James King Jan 12 '17 at 13:11