Question

I’m trying to make a button that changes two things with CSS. First, it will make text appear, and second it will make an image on top of the text disappear. I’ve tried a number of things, but I just can’t get it to work. Any help would be greatly appreciated.
the Css is

p {
    color:#591865;
    text-align:center;
    opacity:0;

}

p:target {
    color:# a1a100;
    opacity:1;
    -webkit-transition: opacity 1s linear;
}

#image {
    opacity: 1;
    background-image:url(images/01.jpg);
    height: 786px;
    width:1024;
}

#image:target {
    opacity:0;
}

and the html is

<nav>
            <a href="#one, #image">One</a>
            <a href="#two, #image">Two</a>
            <a href="#three, #image">Three</a>
            <a href="#four, #image">Four</a>
        </nav>
       <div id="image"><img src="images/01.jpg"/></div> 
       <div>
        <p id="one"><img src="graphics/filler.png" width="281" height="128" onClick="javascript:playVideo1();"/></p> 
        <p id="two"><video src="images/01.m4v" poster="images/01.jpg" autoplay controls></video></p>
        <p id="three">Number Three</p>
        <p id="four">Number Four</p> 
   </div>
   </div>

thanks for any input

Answer 1

This isn’t possible, as it’s currently written. To affect two disparate elements in this manner, would require JavaScript.

However, if you’re able to reorder your HTML (and are willing to have support from only the more modern browsers), then it can be implemented with the following HTML:

<nav>
<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>
<a href="#four">Four</a>
</nav>
<div>
    <p id="one">
        <img src="graphics/filler.png" width="281" height="128" onclick="javascript:playVideo1();"/>
    </p>
    <p id="two">
        <video src="images/01.m4v" poster="images/01.jpg" autoplay controls></video>
    </p>
    <p id="three">
        Number Three
    </p>
    <p id="four">
        Number Four
    </p>
    <div id="image">
        <img src="images/01.jpg"/>
    </div>
</div>​

And the additional CSS selector:

p:target ~ #image {
    opacity:0;
}​

JS Fiddle demo.

If JavaScript’s an option, then the following works:

var links = document.querySelectorAll('nav > a'),
    image = document.getElementById('image');

for (var i=0,len=links.length; i<len; i++){
    links[i].onclick = function(e){
        image.style.opacity = '0';
    };
}​

JS Fiddle demo.

References:

1. CSS:

   • E ~ F, the general sibling combinator.

2. JavaScript:

   • getElementById().
   • querySelectorAll().
   • element.style.