Question

我的问题如下。我对图像项具有悬停效果，但我希望在移动视图处于活动状态时保持悬停效果。

例如：

这是我在台式机和平板电脑上的图片：Without Hover

当我将鼠标悬停在With Hover

上时，它的样子

由于在悬停效果方面移动设备不友好，我希望在用户使用移动设备进入网站时已经显示悬停效果。

这是我的网站演示：https://wp.cedesca.com/

希望您能帮助我

先谢谢您

这是我的代码：

<div class="portfolio-image">
<div class="img-portfolio">
    <img src="https://wp.cedesca.com/media/cfgm-tes-480x320.jpg" alt="Técnico/a" en="" emergencias="" sanitarias="" (presencial)="" title="Técnico/a" data-pagespeed-url-hash="938249764" onload="pagespeed.CriticalImages.checkImageForCriticality(this);">
</div>
<div class="portfolio-hover" style="background-color:#cd6730;/* display: block; */">
    <div class="thumb-bg">
        <div class="mask-content">
            <h3>
                <a href="https://wp.cedesca.com/presencial/cfgm-tecnico-a-en-emergencias-sanitarias/" title="Técnico/a en Emergencias Sanitarias (Presencial)">Técnico/a en Emergencias Sanitarias (Presencial)</a>
            </h3>
            <div class="cat_portfolio">
                <a href="https://wp.cedesca.com/portfolio_category/grado-medio/">Grado Medio</a>, 
                <a href="https://wp.cedesca.com/portfolio_category/modalidad-presencial/">Modalidad Presencial</a>
            </div>
            <a href="https://wp.cedesca.com/presencial/cfgm-tecnico-a-en-emergencias-sanitarias/" title="Técnico/a en Emergencias Sanitarias (Presencial)" class="btn_zoom ">Ver más</a>
        </div>
    </div>
</div>

Answer 1

我查看了您对.portfolio-hover组件的css声明，并且您拥有：

.portfolio_container .wapper_portfolio .portfolio_column .style05 li:hover .portfolio-image .portfolio-hover,
.thim-widget-portfolio .wapper_portfolio .portfolio_column .style05 li:hover .portfolio-image .portfolio-hover {
    -webkit-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transition: -webkit-transform .4s,opacity .1s;
    -moz-transition: -moz-transform .4s,opacity .1s;
    transition: transform .4s,opacity .1s
}

因此，您可以添加媒体查询，并且像执行悬停效果一样，只需删除:hover伪类：

@media only screen and (max-width: 600px) {
    .portfolio_container .wapper_portfolio .portfolio_column .style05 li .portfolio-image .portfolio-hover,
    .thim-widget-portfolio .wapper_portfolio .portfolio_column .style05 li .portfolio-image .portfolio-hover {
        -webkit-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
        -webkit-transition: -webkit-transform .4s,opacity .1s;
        -moz-transition: -moz-transform .4s,opacity .1s;
        transition: transform .4s,opacity .1s
    }
}

例如，.portfolio-hover在屏幕宽度小于600像素时始终可见。

Answer 2

首先，您需要找到断点宽度。例如，Foundation Zurb的移动宽度为640px。

所以我们以它为例，并编写一个媒体查询

CSS：

@media screen and (max-width: 640px) {
     .portfolio_container .wapper_portfolio .portfolio_column .style05 li .portfolio-image .portfolio-hover, 
     .thim-widget-portfolio .wapper_portfolio .portfolio_column .style05 li .portfolio-image .portfolio-hover {
        -webkit-transform: rotateY(0);
        -ms-transform: rotateY(0);
        -o-transform: rotateY(0);
        transform: rotateY(0);
        -webkit-transition: -webkit-transform .4s,opacity .1s;
        -moz-transition: -moz-transform .4s,opacity .1s;
       transition: transform .4s,opacity .1s
       opacity:1;
     }
}

就这样。

什么是断点：

断点定义元素对网站不同版本的需求。

例如：

我们将以一个四列的div为例。这4个div应该彼此相邻。

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
</div>

大多数情况下，您有三个版本：

移动
平板电脑
桌面

第一个断点将是移动版本。您的div内容对于移动版本可能很大，因此您想定义一个所有div看起来都很漂亮的断点。因此，如果您调整浏览器的大小，您将能够看到四个div最佳的宽度。对于本示例，我们将采用640px。

因此，您有了第一个断点：

 @media screen and (max-width: 640px) {
      .container div{
           width:100%;
      }
 }

它是这样的：

.container {
  height:400px;
  border:1px solid black;
  margin:0 auto;
  width:500px;
}
.container .first {
  background:red;
}
.container .second {
  background:yellow;
}
.container .third {
  background:blue;
}
.container .fourth {
  background:green;
}
.container div {
    width:100%;
    height:100px;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
</div>

对于平板电脑版本，您可能希望div占据每个屏幕的一半。因此，您需要调整窗口的大小，然后才能找到可以输入下一个断点的位置。假设1024px。这将覆盖640px CSS。

 @media screen and (max-width: 1024px) {
      .container div{
           width:50%;
           float:left;
           height:200px;
      }
 }

.container {
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  width: 500px;
}

.container .first {
  background: red;
}

.container .second {
  background: yellow;
}

.container .third {
  background: blue;
}

.container .fourth {
  background: green;
}

.container div {
  width: 50%;
  float: left;
  height: 200px;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
</div>

最后您可以说，对于桌面版本，我希望所有div彼此相邻。因此，请注意以下代码：

@media screen and (min-width: 1025px) {
      .container div{
          width:25%;
          float:left;
          height:400px;
      }
 }

.container {
  height:400px;
  border:1px solid black;
  margin:0 auto;
  width:500px;
}
.container .first {
  background:red;
}
.container .second {
  background:yellow;
}
.container .third {
  background:blue;
}
.container .fourth {
  background:green;
}
.container div {
    width:25%;
    float:left;
    height:400px;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
</div>

Answer 3

如果您正在使用Bootstrap断点（即小型设备的SM），则必须在列表

上应用断点，因为该组合会悬停，因此在小型设备中，组合会悬停检测到小型设备时的宽度，不确定语法请检查

    @media screen (max-width: 575px){
        li{
         .portfolio-hover{
                 background-color: rgb(192, 28, 37);
                 width: 295px;
                 position: absolute;
                 left: 295px;
                 top: 0px;
           }
        }
    }

悬停项目始终在移动设备上处于活动状态

3 个答案: