Question

我正在创建一个手风琴css导航栏，我无法在悬停时隐藏初始图像。

我想在悬停时显示大图像并隐藏较小的图像。现在，我使用不透明度：0;哪个有效，但是当我停止在最初的小图像上停留时，它会重新出现。有关如何仅在悬停时显示大图像并替换为较大图像的任何建议

CSS和HTML

＆＃13;

/* The Magic */
 .accordion .accordion-item:hover .accordion-item-content, .accordion .accordion-item--default .accordion-item-content {
    height: 200px;
}
.accordion-item-content, .accordion:hover .accordion-item-content {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .25s;
    -moz-transition: height .25s ;
    -ms-transition: height .25s ;
    -o-transition: height .25s ;
    transition: height .25s ;
}
.accordion-item .hover_sm:hover {
    opacity: 0;
   
 overflow: hidden;    
    -webkit-transition: height .25s;
    -moz-transition: height .25s;
    -ms-transition: height .25s;
    -o-transition: height .25s;
    transition: height .25s;
}
/* Aesthetic */
 body {
    background: #fff;
}
.accordion {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    font-family: Arial;
}
.accordion .accordion-item {
    background-image: -webkit-linear-gradient(90deg, #ffffff, #ffffff, #ffffff);
    background-image: linear-gradient(90deg, #ffffff, #ffffff, #ffffff);
    border-bottom: 1px solid #ffffff;
    color: #eee;
}
.accordion img {
    width:100%
}
.accordion p {
    margin: 0;
}
.accordion .accordion-item:nth-child(1) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(2) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(3) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(4) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(5) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}

＆＃13;

<div class="accordion">
    <section class="accordion-item"> <div class="hover_sm"><a href="#" zstep="Intellicenter Solutions" zp="true"><img  src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/about_sm.png" alt="" /></a></div>

        <div class="accordion-item-content"><a href="#" zstep="About" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/about_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item accordion-item" zcondition="Solutions Option=='Intellicenter'" zp="true"><a href="#" zstep="About" zp="true"> <img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/intelli_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Intellicenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/intelli_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item" zcondition="Solutions Option=='Devcenter'" zp="true"> <a href="#" zstep="Devcenter Solutions" zp="true"><img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/dev_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Devcenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/dev_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item" zcondition="Solutions Option=='Opscenter'" zp="true"> <a href="#" zstep="Opscenter Solutions" zp="true"><img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/ops_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Opscenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/ops_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item" zcondition="Solutions Option=='Securecenter'" zp="true"> <a href="#" zstep="Securecenter Solutions" zp="true"><img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/secure_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Securecenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/secure_lg.png" alt="" /></a>

        </div>
    </section>
</div>

＆＃13;

Answer 1

更改

.accordion-item .hover_sm:hover {

到

.accordion-item:hover .hover_sm {

这样，只要.hover_sm被徘徊，对.accordion-item的任何影响都会保留。

/* The Magic */
 .accordion .accordion-item:hover .accordion-item-content, .accordion .accordion-item--default .accordion-item-content {
    height: 200px;
}
.accordion-item-content, .accordion:hover .accordion-item-content {
    height: 0;
    overflow: hidden;
    -webkit-transition: height .25s;
    -moz-transition: height .25s ;
    -ms-transition: height .25s ;
    -o-transition: height .25s ;
    transition: height .25s ;
}
.accordion-item:hover .hover_sm {
    opacity: 0;
   
 overflow: hidden;    
    -webkit-transition: height .25s;
    -moz-transition: height .25s;
    -ms-transition: height .25s;
    -o-transition: height .25s;
    transition: height .25s;
}
/* Aesthetic */
 body {
    background: #fff;
}
.accordion {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    font-family: Arial;
}
.accordion .accordion-item {
    background-image: -webkit-linear-gradient(90deg, #ffffff, #ffffff, #ffffff);
    background-image: linear-gradient(90deg, #ffffff, #ffffff, #ffffff);
    border-bottom: 1px solid #ffffff;
    color: #eee;
}
.accordion img {
    width:100%
}
.accordion p {
    margin: 0;
}
.accordion .accordion-item:nth-child(1) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(2) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(3) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(4) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}
.accordion .accordion-item:nth-child(5) {
    background-color: hsl(200, 80%, 60%);
    background-image: -webkit-linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
    background-image: linear-gradient(-90deg, #ffffff, #ffffff 2em, #ffffff);
}

<div class="accordion">
    <section class="accordion-item"> <div class="hover_sm"><a href="#" zstep="Intellicenter Solutions" zp="true"><img  src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/about_sm.png" alt="" /></a></div>

        <div class="accordion-item-content"><a href="#" zstep="About" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/about_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item accordion-item" zcondition="Solutions Option=='Intellicenter'" zp="true"><a href="#" zstep="About" zp="true"> <img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/intelli_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Intellicenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/intelli_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item" zcondition="Solutions Option=='Devcenter'" zp="true"> <a href="#" zstep="Devcenter Solutions" zp="true"><img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/dev_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Devcenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/dev_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item" zcondition="Solutions Option=='Opscenter'" zp="true"> <a href="#" zstep="Opscenter Solutions" zp="true"><img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/ops_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Opscenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/ops_lg.png" alt="" /></a>

        </div>
    </section>
    <section class="accordion-item" zcondition="Solutions Option=='Securecenter'" zp="true"> <a href="#" zstep="Securecenter Solutions" zp="true"><img class="hover_sm" src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/secure_sm.png" alt="" /></a>

        <div class="accordion-item-content"><a href="#" zstep="Securecenter Solutions" zp="true"><img src="http://dynamic.ziftsolutions.com/clients/ca/i/showcase/secure_lg.png" alt="" /></a>

        </div>
    </section>
</div>

显示无法处理css转换

1 个答案: