CSS – does a:focus not work?

  • Unknown's avatar
    alcais · Member ·

    Hello,

    I’m trying to make an image gallery with CSS and it totally works in my local machine but I noticed the focus selector doesn’t work once I upload the code. I put a simple code to verify it so hope you can help me:

    CSS (added in the CSS stylesheet editor):

    .pics {
    float:left;
    display:inline;
    background-color:#00CC66;
    color:#000;
    text-decoration:none;
    width:70px;
    height:70px;
    cursor:default;
    padding:2px;
    }

    .pics span {
    display:none;
    border:0;
    width:730px;
    background:#bbb;
    text-align:center;
    }

    .pics:hover span {
    display:block;
    position:absolute;
    left:9px;
    top:150px;
    z-index:10;
    height:780px;
    }

    .pics:focus span {
    display:block;
    position:absolute;
    left:9px;
    top:150px;
    z-index:5;
    outline:0;
    height:780px;
    }

    HTML (added to my page)

    <span></span>

    </div>

    URL of the test:

    http://isrartistic.com/testcss/

    As you can see, the selector hover works when you roll the cursor over the green square and shows a big gray rectangle down, but when I click, the focus should leave visible the rectangle even if I move the cursor elsewhere, but it doesn’t work.

    I need help please

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    alcais · Member ·

    For some reason the HTML code wasn’t pasted well:

    <span></span>

    </div>

  • Unknown's avatar
    alcais · Member ·

    Oh, again, I think it automatically turns the anchor tag into a link, try again writing “(” in place of “<“sorry:

    (a class=”pics”) <span></span>(/a)

    </div>

  • Unknown's avatar
    thesacredpath · Member ·

    The :focus selector is allowed on elements that accept keyboard events or other user inputs such as text fields on forms.

  • Unknown's avatar
    alcais · Member ·

    Thanks for the reply.
    Is there any alternative for what I want to implement?

  • Unknown's avatar
    thesacredpath · Member ·

    I’m not sure exactly what you are trying to do. In a gallery if you click on an image it takes you away from that page to either the full sized image in a browser window, or an attachment page, so the page you were on is not visible to the visitor. Please explain what you are wanting to occur.

  • The topic ‘CSS – does a:focus not work?’ is closed to new replies.