title: BXSlider arrows and images
body: <p>I am working with the BX slider a little differently than usual.</p>
  
  <p>Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- + HEADER VIDEO SLIDER ... --&gt;
              &lt;div class="view-status-container"&gt;
                  &lt;div class="inner-container"&gt;   
                      &lt;!-- SLIDING INSTRUMENT BACKGROUNDS --&gt;
                      &lt;ul class="screenshot-slider bxslider"&gt;
                          &lt;li&gt;&lt;div class="environment1"&gt;&lt;/div&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;div class="environment2"&gt;&lt;/div&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;div class="environment3"&gt;&lt;/div&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- - HEADER VIDEO SLIDER ... --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* VIEW STATUS ... */
  .view-status-container {
      width: 100%;
      height: 400px;
      overflow: hidden;
      background-color: #939393;
  }
  .view-status-container .inner-container {
      width: 100%;
  }
  .screenshot-slider {
      display: block;
      margin: 0 auto;
      padding: 0px;
      list-style: none;
  }
  .screenshot-slider li {
      margin: 0px;
      padding: 0px;
  }
  .screenshot-slider img {
      width: 100%;
  }
  .environment1 {
      background-image: url(images/set_the_tone-willheader.jpg);
      background-repeat: none;
      background-position: right center top;
      background-size: cover;
      width: 100%;
      height: 400px;
  }
  .environment2 {
      background-image: url(images/set_the_tone-willheader.jpg);
      background-repeat: none;
      background-position: center center top;
      background-size: cover;
      width: 100%;
      height: 400px;
  }
  .environment3 {
      background-image: url(images/set_the_tone-willheader.jpg);
      background-repeat: none;
      background-position: right center top;
      background-size: cover;
      width: 100%;
      height: 400px;
  }
  .circle-holder {
      position: relative;
      left: 414px;
      width: 100px;
      margin: 0 auto;
      margin-top: -620px;
  }
  .circle {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: 0 auto;
      z-index: 9998;
      border-radius: 50%;
      background-color: #65ade9;
      box-shadow: 0px 0px 6px #65b0ea;
  
  }
  #circle-1 {
  
  }
  #circle-2 {
  
  }
  </code></pre>
  
  <p>Jquery BXSlider CSS:</p>
  
  <pre><code>/* DIRECTION CONTROLS (NEXT / PREV) */
  
  .bx-wrapper .bx-prev {
      left: 7%;
      background: url(../images/slider_arrow_left.png) no-repeat;
  }
  
  .bx-wrapper .bx-next {
      right: 7%;
      background: url(../images/slider_arrow_right.png) no-repeat;
  }
  
  .bx-wrapper .bx-prev:hover {
      background: url(../images/slider_arrow_left_hover.png) no-repeat;
  }
  
  .bx-wrapper .bx-next:hover {
      background: url(../images/slider_arrow_right_hover.png) no-repeat;
  }
  
  .bx-wrapper .bx-controls-direction a {
      position: absolute;
      top: 50%;
      margin-top: -16px;
      outline: 0;
      width: 62px;
      height: 112px;
      text-indent: -9999px;
      z-index: 9999;
  }
  
  .bx-wrapper .bx-controls-direction a.disabled {
      display: none;
  }
  </code></pre>
  
  <p>I am Having Two different problems with my code. The first problem is that whenever i hover over the left arrow button it disappears, when it should replace with another image of an arrow in color.</p>
  
  <p>The Second issue i am having is that i cant get the slider image to be clickable to a video light box.</p>
  
  <p>I have tried multiple things but just cant get it to work. anyone have a solve or suggestion?</p>
  
  <p>Thanks!</p>