Trying to resolve an SVG issue I'm having that involves hiding and showing

[asasass]

Here’s what I’m trying to do. @PaulOB

Edit fiddle - JSFiddle - Code Playground

1.) I’m trying to hide the green & red lines only when the blue background is showing.

Resolved
See: #5

2.) Inactive svg’s

Only when the blue background is showing, but I only want to leave the 1 big one showing.

See: 4#

Resolved
See: #6

3.) svg hover:

I don’t want it to work on the 1st svg on the blue background, only the ones on the gray background.

Resolved
See: #3

.wraph {
  position: relative;
  width: 606px;
  height: 606px;
}

.wraph .playcover {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  fill: red;
}

.wraph .cover {
  width: 606px;
  height: 606px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wraph.active,
.wraph .cover {

  background: url("https://i.imgur.com/PxxHOGw.png") no-repeat 0 0;
}

.wraph.active {
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background-position: -3px -609px;
}

.wraph .cover {
  display: none;
}

.wraph.inactive .cover {
  display: block;
}


.wraph .cover::before,
.wraph .cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 201px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wraph .cover::after {
  left: 402px;
}



.wraph .linesa::before,
.wraph .linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: green;
}

.wraph .linesa::after {
  left: 399px;
}



.wraph .linesb::before,
.wraph .linesb::after {
  content: "";
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  height: 3px;
  background: red;
}

.wraph .linesb::after {
  top: 399px;
}

.wrape.inactive svg {
  display: none;
}

.wraph.inactive a {
  display: none;
}

.hide {
  display: none;
}

.wraph .playa,
.playb,
.playc,
.playd,
.playe,
.playf,
.playg,
.playh,
.playi {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: transparent;
}

.wraph .playa {
  margin: 0;
}

.wraph .playb {
  margin: 0 201px;
}

.wraph .playc {
  margin: 0 402px;
}

.wraph .playd {
  margin: 201px 0;
}

.wraph .playe {
  margin: 201px 201px;
}

.wraph .playf {
  margin: 201px 402px;
}

.wraph .playg {
  margin: 402px 0;
}

.wraph .playh {
  margin: 402px 201px;
}

.wraph .playi {
  margin: 402px 402px;
}

.wraph svg:hover path {
  fill: #0059dd;
}

[asasass]

I tried this:

Edit fiddle - JSFiddle - Code Playground

It hides the svg’s on the blue background, but then their not visible on the gray background, which I want them to be.

Only 1 svg is visible on hover.

I’m confused on how I would get this to work.

.wraph.inactive .playa,
.playb,
.playc,
.playd,
.playe,
.playf,
.playg,
.playh,
.playi  {
  display: none;
}

.wraph.inactive a {
  display: none;
}

[asasass]

I just figured 3.) out.

.wraph.active svg:hover path {
  fill: #0059dd;
}

But I can’t add that in yet until #2 is figured out first.

Edit fiddle - JSFiddle - Code Playground

.wraph /*.active*/ svg:hover path {
  fill: #0059dd;
}

I removed the transparent so it’s easier .

Edit fiddle - JSFiddle - Code Playground

I’m trying to hide the black play svgs.

[asasass]

Is this a javascript issue, or just involves the CSS? @Paul_Wilkins

This is what happens when I do this:

Edit fiddle - JSFiddle - Code Playground

It removes the svg on both the blue and the gray, only leaves one showing

It works in removing them off the blue background, but I want them all to appear on the gray.

What am I doing wrong here?

.wraph.inactive .playa,
.playb,
.playc,
.playd,
.playe,
.playf,
.playg,
.playh,
.playi {
  display: none;
}

When I remove this it looks like this:

Edit fiddle - JSFiddle - Code Playground

.wraph.inactive .playa,
.playb,
.playc,
.playd,
.playe,
.playf,
.playg,
.playh,
.playi {
  display: none;
}

[asasass]

I just figured out. 1.)

Edit fiddle - JSFiddle - Code Playground

.wraph.active .linesa::before,
.wraph.active .linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: green;
}

.wraph.active .linesa::after {
  left: 399px;
}



.wraph.active .linesb::before,
.wraph.active .linesb::after {
  content: "";
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  height: 3px;
  background: red;
}

.wraph.active .linesb::after {
  top: 399px;
}

[asasass]

I only want the svg’s, to show on the gray background, and not the blue.
@PaulOB

.playa,
.playb,
.playc,
.playd,
.playe,
.playf,
.playg,
.playh,
.playi

Update****

I think I resolved it.

Edit fiddle - JSFiddle - Code Playground

.wraph.inactive a {
  display: none;
}

[tensormonkey]

Just wanted to say that I enjoyed reading through this thread and seeing you working out the issues. Your notes will also help people in the future who come across this thread via google