CODEWITHSUNDEEP
htmlcss
Dallas
Dallas

Reputation: 928

CSS3 :target on named tag not working

I am having a hard time getting :target to work on a named tag.

The fiddle is here: https://jsfiddle.net/vgcLartp/1

Any ideas why this is not working?

Upvotes: 1

Views: 99

Answers (3)

Marco Luzzara
Marco Luzzara

Reputation: 6036

From w3school:

URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.

:target selector is useful when within an URL is specified (using an anchor for example) an element in your HTML.

In your case you can use:

:target {
    visibility: visible;
    opacity: 1;
}

Upvotes: 0

Nageshwari p
Nageshwari p

Reputation: 49

try this

:target {
  visibility: visible;
  opacity: 1;
}

Upvotes: 0

Chiller
Chiller

Reputation: 9738

You need to use target on the sections that you want to show not the links

section:target {...}

See updated jsfiddle

nav {
  height: 60px;
  border-bottom: 1px solid #eaeaea;
}

.nav-item {
  display: block;
  float: left;
  margin-right: 20px;
  height: 60px;
  font-size: 26px;
  line-height: 60px;
  text-align: center;
  overflow: hidden;
  color: #666;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  outline: none;
}

.nav-item:last-child {
  margin-right: 0;
}

.nav-item:hover {
  color: #333;
}

.nav-item.active,
.nav-item.active:hover {
  color: #333;
  border-bottom-color: #b39095;
}

section:target {
  visibility: visible;
  opacity: 1;
}


/* -------------------------------- SECTIONS -------------------------------- */

#sections {
  float: left;
  width: 1200px;
  height: 400px;
}

section {
  position: fixed;
  width: 630px;
  height: 400px;
  float: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s linear;
}

section p {
  padding-top: 5px;
  line-height: 1.6em;
}

section a {
  color: #b39095;
  text-decoration: none;
}

section a:hover {
  color: #7b618a;
}


/* --------------------------------- OPTIONS -------------------------------- */

fieldset {
  margin: 26px 0 15px 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}

input {
  padding-left: 2px;
}

#oxford-app-id {
  width: 80px;
}

#oxford-app-key {
  width: 290px;
}

label {
  padding-left: 5px;
}
<div id="container">
  <header>
    <nav>
      <a id="options" class="nav-item active" href="#section-options">options<br>saved</a>
      <a id="about" class="nav-item" href="#section-about">about</a>
    </nav>
  </header>

  <div id="sections">
    <section id="section-options">
      <p>
        Options
      </p>
    </section>
    <section id="section-about">
      <p>
        About
      </p>
    </section>
  </div>

</div>

Upvotes: 2

Related Questions