CODEWITHSUNDEEP
htmlcssonclick
parsecer
parsecer

Reputation: 5106

Click on image, change a text's background

I'm using a hack from this answer to make an image to resize on click (the checkbox method). It works fine. However, when I try to also apply a css style on a text on image click, it doesn't work:

<html>
<body>
  <input type="checkbox" id="img-box"/>
  <label for = "img-box">
    <img src="http://www.al-van.org/AV/Manners_files/greeneyedcat.jpg"/>
  </label>

  <p id="some-text">
    some text
  </p>
</body>
</html>


#img-box:checked + label > img  {
    width: 100px;

}

#img-box:checked + p  {
    background-color: red;

}

What is my mistake here and how should I fix it?

The jsfiddle: https://jsfiddle.net/eus18r3h/

Upvotes: 1

Views: 42

Answers (2)

C. Johnson
C. Johnson

Reputation: 219

The input element with the id "img-box" is not a direct sibling to the p tag. #img-box:checked + p would only style a p tag which is directly next to the input, you have a label in between.

This would be the selector you are looking for '#img-box:checked + label + p'

Upvotes: 2

bluecouch
bluecouch

Reputation: 193

You have used the adjacent sibling combinator (+) for your paragraph tag, but it only works if you have one element after another. So since you have the label tag in between, it doesn't work. If you just replace the + with the general sibling combinator ~ the code should work. 

#img-box:checked ~ p{
    background-color: red;
}

Upvotes: 1

Related Questions