悬停时不呈现边框颜色，而是呈现文本颜色

Question

当我尝试将鼠标悬停在图像区域时，将呈现文本的颜色而不是边框​​。

当我将鼠标悬停在图像区域上时，如何获得要呈现的边框颜色而不是文本颜色。

只需要填写stackoverflow要我填写的详细信息 ................................................... ................................................... ................................................... ................................................... .....................................

此处是密码笔https://codepen.io/anon/pen/wVeYwv 有人帮助我

// CSS CODE

$primary: #e5594b;


.product {
    border: 1px solid black;
}

  .item{
        transition: color 0.25s;
        &::before,
        &::after {

          border: 2px solid transparent;
          width: 0;
          height: 0;
        }

        // This covers the top & right borders (expands right, then down)
        &::before {
          top: 0;
          left: 0;
        }

        // And this the bottom & left borders (expands left, then up)
        &::after {
          bottom: 0;
          right: 0;
        }

        &:hover {
          color: $primary;
        }

        // Hover styles
        &:hover::before,
        &:hover::after {
          width: 100%;
          height: 100%;
        }

        &:hover::before {
          border-top-color: $primary; // Make borders visible
          border-right-color: $primary;
          transition:
            width 0.25s ease-out, // Width expands first
            height 0.25s ease-out 0.25s; // And then height
        }

        &:hover::after {
          border-bottom-color: $primary; // Make borders visible
          border-left-color: $primary;
          transition:
            border-color 0s ease-out 0.5s, // Wait for ::before to finish before showing border
            width 0.25s ease-out 0.5s, // And then exanding width
            height 0.25s ease-out 0.75s; // And finally height
        }
}
//HTML

    <div class="item">
          <div class="product">
            <div class="box">
              <a class="img-prod">
                <img
                  class="img-fluid product-image"
                 <img src="https://colorlib.com/wp/wp-content/uploads/sites/2/store-free-template.jpg" alt="Product Item" class="img-fluid product-image">
              </a>

              <div class="text pt-3 px-3">
                <h3>A5 Photo</h3>
                <div class="d-flex">
                  <div class="pricing">
                    <p v-if="item.discounts.length != 0" class="price">
                      <span class="mr-2 price-dc">$2</span>
                      <span class="price-sale">$3</span>
                    </p>
                    </p>
                  </div>
                </div>
              </div>
            </div>
    </div>
      </div>

Answer 1

我已经更新了您的代码。您已将边框应用于.product类，因此我们必须将其悬停并从.item类中删除悬停。

$primary: #e5594b;


.product {

  	border: 1px solid black;
}

.product:hover {

  	border: 1px solid red;
}


  .item{
	
		transition: color 0.25s;
		&::before,
		&::after {
		  // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
		  border: 2px solid transparent;
		  width: 0;
		  height: 0;
		}
	  
		// This covers the top & right borders (expands right, then down)
		&::before {
		  top: 0;
		  left: 0;
		}
	  
		// And this the bottom & left borders (expands left, then up)
		&::after {
		  bottom: 0;
		  right: 0;
		}
	  
		// Hover styles
		&:hover::before,
		&:hover::after {
		  width: 100%;
		  height: 100%;
		}
	  
		&:hover::before {
		  border-top-color: $primary; // Make borders visible
		  border-right-color: $primary;
		  transition:
			width 0.25s ease-out, // Width expands first
			height 0.25s ease-out 0.25s; // And then height
		}
	  
		&:hover::after {
		  border-bottom-color: $primary; // Make borders visible
		  border-left-color: $primary;
		  transition:
			border-color 0s ease-out 0.5s, // Wait for ::before to finish before showing border
			width 0.25s ease-out 0.5s, // And then exanding width
			height 0.25s ease-out 0.75s; // And finally height
		}
}

<div class="item">
          <div class="product">
            <div class="box">
              <a class="img-prod">
                <img
                  class="img-fluid product-image"
                 <img src="https://colorlib.com/wp/wp-content/uploads/sites/2/store-free-template.jpg" alt="Product Item" class="img-fluid product-image">
              </a>

              <div class="text pt-3 px-3">
                <h3>A5 Photo</h3>
                <div class="d-flex">
                  <div class="pricing">
                    <p v-if="item.discounts.length != 0" class="price">
                      <span class="mr-2 price-dc">$2</span>
                      <span class="price-sale">$3</span>
                    </p>
                    </p>
                  </div>
                </div>
              </div>
            </div>
    </div>
      </div>