title: put two ids in one a href
body: <p>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>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>and the html is</p>
  
  <pre><code>&lt;nav&gt;
              &lt;a href="#one, #image"&gt;One&lt;/a&gt;
              &lt;a href="#two, #image"&gt;Two&lt;/a&gt;
              &lt;a href="#three, #image"&gt;Three&lt;/a&gt;
              &lt;a href="#four, #image"&gt;Four&lt;/a&gt;
          &lt;/nav&gt;
         &lt;div id="image"&gt;&lt;img src="images/01.jpg"/&gt;&lt;/div&gt; 
         &lt;div&gt;
          &lt;p id="one"&gt;&lt;img src="graphics/filler.png" width="281" height="128" onClick="javascript:playVideo1();"/&gt;&lt;/p&gt; 
          &lt;p id="two"&gt;&lt;video src="images/01.m4v" poster="images/01.jpg" autoplay controls&gt;&lt;/video&gt;&lt;/p&gt;
          &lt;p id="three"&gt;Number Three&lt;/p&gt;
          &lt;p id="four"&gt;Number Four&lt;/p&gt; 
     &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>thanks for any input</p>