CODEWITHSUNDEEP
jqueryhtmlcss
Gmanc2
Gmanc2

Reputation: 13

Changing Input opacity on click

For some reason the :Active tag doesn't make the button disappear or turn to opacity 0.0 any ideas?

#button1 {
  height: 50px;
  width: 250px;
  position: absolute;
  left: 300px;
  top: 500px;
  opacity: 0.6;
}
#button1:hover {
  width: 270px;
  height: 60px;
}
#button1:visited {
  width: 0px;
  height: 0px;
  opacity: 0.0;
}
<a href="test" target="_blank">
  <input type="image" id="button1" src="button.png" />
</a>

Upvotes: 0

Views: 60

Answers (2)

Andy Hoffman
Andy Hoffman

Reputation: 19119

One way to do this without JavaScript is to use CSS target. First, give you provide an id attribute for your link:

<a id="test" href="#test">
  <input type="image" id="button1" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/138.jpg" />
</a>

Next, you target that id in your CSS:

#test:target {
  display: none;
}

enter image description here

Upvotes: 1

Cameron637
Cameron637

Reputation: 1719

You can't use the visited selector on anything but a link. Even though you've wrapped your input in an anchor tag, it won't work to try and select it with the visited selector.

You can use #Button1:active instead or give the anchor element an id and use that #anchorTagID:visited

Upvotes: 0

Related Questions