Question

我的页面上有基于CSS的悬停/点击效果，效果很好。当项目（.print）悬停时，右侧会出现一个全彩色图像（.print_photo）。单击该项目时，图像淡化为灰色，并出现文本框（.print_text）。

点击功能仅在您按住单击时才有效，我希望点击后一直保持可见，直到点击另一个项目。这可能吗？

（我没有足够的声誉来发布图像，我会发布它）图像大小是宽度：620px;高度：490px;

CSS

#bgtextbox{
    width:320px;
    height:391px;
    background-color:#BCBEC0;
    margin:130px 0 0 0px;
    position:absolute;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    z-index:1;
    }

/* hover/click START */
.print{
        width:340px;
        height:40px;
        background-color:#E6E7E8;
        margin:6px 0 0 0px;
        position:relative;
        text-align:center;
        font-family:Arial, Helvetica, sans-serif;
        font-weight:bold;
        line-height:40px;
        border:1px solid #E6E7E8;
        z-index:12;
        }

.print_photo{
        width:620px;
        height:490px;
        margin:-48px 0 0 370px;
        text-align:center;
        background-repeat:no-repeat;
        position:absolute;  
        z-index:2;      
        }

.print_photo img{
            opacity:0;
            max-height:100%;
            max-width:100%;
            } 

.print_text{
            width:430px;
            height:150px;
            margin:292px 0 0 397px;
            position:absolute;
            border-radius: 20px / 20px;
            opacity:.75;
            color:transparent;
            z-index:13;
            }


.print:hover{
            border:1px solid #F15A24;
            cursor:pointer;             
            }

.print:hover ~ .print_photo img{
                            opacity:1;
                            -webkit-transition: opacity 1s ease-in-out;
                      -moz-transition: opacity 1s ease-in-out;
                      -o-transition: opacity 1s ease-in-out;
                      transition: opacity 1s ease-in-out;                                       
                            }

.print:active ~ .print_photo img{   
                        filter: grayscale(100%);
                        -webkit-filter: grayscale(100%);
                        -moz-filter: grayscale(100%);
                        -ms-filter: grayscale(100%);
                        -o-filter: grayscale(100%);
                        opacity:.5;
                        -webkit-transition: opacity 1s ease-in-out;
                      -moz-transition: opacity 1s ease-in-out;
                      -o-transition: opacity 1s ease-in-out;
                      transition: opacity 1s ease-in-out;
                        }

.print:active ~ .print_text{                            
                    background-color:#000;
                    color:#FFF;
                    }
    /* END */

HTML

<div id="bgtextbox">
  <div class="print">PRINT</div>
  <div class="print_photo"><img src="images/print.png"</div></div>
  <div class="print_text">PRINT TEXT GOES HERE</div>
</div>

Answer 1

你需要为此使用JS。让一些JS运行onClick你的.print元素之一，为它添加一个'selected'类，首先从所有其他元素中删除该类。

Answer 2

最简单的解决方案是使用JS，就像@DuncanLock建议的那样。更有创意（但基于CSS）的方法是创建一个.print的兄弟，这是一个复选框。

<div id="bgtextbox">
    <div class="print">PRINT</div>
    <input type="checkbox" class="print_checkbox" />
    <div class="print_photo"><img src="images/print.png"</div></div>
    <div class="print_text">PRINT TEXT GOES HERE</div>
</div>

将其CSS设置为：

.print_checkbox {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity:0.01;
}

所以它填满了div所做的整个区域，看起来很透明。我应该向不经意的观察者指出，你需要设置父position的{{1}}，但他已经在他的CSS中做到了。

然后让CSS使用#bgtextbox psuedo-class来显示基于checked（clicked）的img。只需改变一下：

:checked

对此：

.print:active ~ .print_photo img

你仍然需要IE8的JS解决方案，但你仍然需要使用.print_checked:checked + .print_photo img CSS选择器，所以在浏览器兼容性方面没有任何区别。

只是值得深思。这不完全是所见即所得的编码方法，但如果你是那种试图尽可能利用CSS而不是JS的开发人员（比如我），这是一个很酷的小技巧。

Answer 3

您必须使用JS来设置类，然后在需要时将其删除。

HTML

<div id="bgtextbox">
     <div id="print" class="print">PRINT</div>
     <div class="print_photo"><img src="images/print.png"</div></div>
     <div class="print_text">PRINT TEXT GOES HERE</div>
</div>

CSS

.printactive ~ .print_photo img{   
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    opacity:.5;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.printactive ~ .print_text{                            
    background-color:#000;
    color:#FFF;
}

JS

document.getElementById("print").addEventListener("click",activatePrintDiv);

function activatePrintDiv(){
    var pclass = this.getAttribute("class");
    this.setAttribute("class",pclass+" printactive");
}

Answer 4

你需要Javascript才能做到这一点。实际上有一种技术可以通过单选按钮和纯css来实现，但由于它实际上是一个黑客，而且很安静，我会直接进入jquery解决方案。

您必须在现有的CSS中添加一些选择器：

.print.active  ~ .print_text, .print:active ~ .print_text {
.print.active ~ .print_photo img, .print:active ~ .print_photo img {

正如您将注意到的那样，现在不仅会在鼠标关闭时（：活动）触发样式，而且当它包含类.active

时也会触发样式

使用几行jQuery，您可以在点击时切换该类：

// when print is clicked
$('.print').click(function() {
    // remove the old active
    $('.print.active').removeClass('active');
    // add the active class to the trigger
    $(this).addClass('active');
});

可以在这里找到一个工作示例： http://jsfiddle.net/WRwVf/

修改
要在页面中包含此代码，您必须首先加载jQuery库。添加这样的东西作为你身体的最后一个节点：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

然后你可以把你的脚本放在下面。请注意，将它放在'ready'事件中也是明智之举。像这样：

<script type="text/javascript"> // when the DOM is ready $(document).ready(function() { /* - The above code goes here - */ }); </script>

你也可以将脚本放在一个单独的.js文件中，并以与jquery库相同的方式加载它，但因为它只是几行代码，所以这会被一些人认为是过度的，因为额外的http请求会降低页面速度。

一次定位多个课程

4 个答案: