在移动设备上显示文字，在桌面上隐藏文字

Question

我有一个简单的框，用于项目图像，标题和描述。在桌面上，我有一些jquery，它会在鼠标输入时显示项目描述。在移动设备上，我希望这只是一个始终可见的文本块。到目前为止我所尝试的只是在移动设备上“取消”javascript，但这使得描述在任何时候都完全不可见，直到调整显示大小。

如何将.text-container（说明框）更改为始终在移动设备上可见，但在桌面上保持我的鼠标行为？

这是我的代码：

    $(document).ready(function(){
    
    	// coincides with mobile screen width check in media query in style_projects.css
    	var smallScreenWidth = 480;
    
    	$(".projectbox").mouseenter(
    		function(){
    			if ($(window).width() > smallScreenWidth)
    				$("#" + this.id + " .text-container").css("visibility", "visible");
    		}
    	);
    
    	$(".projectbox").mouseleave(
    		function(){
    			if ($(window).width() > smallScreenWidth)
    				$("#" + this.id + " .text-container").css("visibility", "hidden");
    		}
    	);
    
    });  	

    body
    {
    	font-family: Georgia, serif;
    }
    
    .projectbox
    {
    	background-color: greenyellow;
    	width: 240px;
    	height: 181px;
    	cursor: pointer;
    	margin-bottom: 50px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    .projectbox img
    {
    	height: 160px;
    	width: 240px;
    	position: absolute;
    }
    
    .text-container 
    {
    	background-color: rgba(50,50,50,0.5);
    	position: absolute;
    	visibility: hidden;
    	height: 160px;
    	width: 240px;
    	padding: 10px 10px 10px 10px;
    }
    
    @media only screen and (max-device-width: 480px)
    {
    	.text-container
    	{
    		visibility: visible;
    	}
    
    }
    
    .titlebox
    {
    	background-color: red;
    	padding: 10px 10px 10px 10px;
    	width: 100%;
    	height: 40px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="projectbox" id="project1">
<div class="titlebox">Project1</div>
<img src="big_test.jpg">
<p class="text-container">
This is a sample project description. It's not a bad description, but it's short.
</p>	
</div>

Answer 1

您是否尝试使用max-width代替max-device-width？

@media only screen and (max-width: 480px)

如果您要在笔记本电脑上调试此问题，最好使用max-width，因为您可能无法在设备上看到实际的css结果。

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

• max-width是目标显示区域的宽度，例如，浏览器;
• max-device-width是设备整个渲染区域的宽度，即实际的设备屏幕。

如果您使用的是max-device-width，当您更改桌面上浏览器窗口的大小时，CSS样式将不会更改为不同的媒体查询设置; 如果您使用的是最大宽度，当您更改桌面浏览器的大小时，CSS将更改为不同的媒体查询设置，您可能会看到移动设备的样式，例如触摸友好菜单。

Answer 2

我想你想这样：

$(document).ready(function(){

    // coincides with mobile screen width check in media query in style_projects.css
    var smallScreenWidth = 480;

    $(".projectbox").mouseenter(
        function(){
            if ($(window).width() > smallScreenWidth)
                $("#" + this.id + " .text-container").css("visibility", "visible");
            if ($(window).width() < smallScreenWidth)
                $("#" + this.id + " .text-container-mobile").css("visibility", "visible");
        }
    );

    $(".projectbox").mouseleave(
        function(){
            if ($(window).width() > smallScreenWidth)
                $("#" + this.id + " .text-container").css("visibility", "hidden");
            if ($(window).width() < smallScreenWidth)
                $("#" + this.id + " .text-container-mobile").css("visibility", "hidden");
        }
    );

});  

  body
{
    font-family: Georgia, serif;
}

.projectbox
{
    background-color: greenyellow;
    width: 240px;
    height: 181px;
    cursor: pointer;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
}

.projectbox img
{
    height: 160px;
    width: 240px;
    position: absolute;
}

.text-container 
{
    background-color: rgba(50,50,50,0.5);
    position: absolute;
    visibility: hidden;
    height: 160px;
    width: 240px;
    padding: 10px 10px 10px 10px;
}
.text-container-mobile
{
    background-color: rgba(50,50,50,0.5);
    position: absolute;
    visibility: hidden;
    height: 160px;
    width: 240px;
    padding: 10px 10px 10px 10px;
}

@media only screen and (max-device-width: 480px)
{
    .text-container
    {
        visibility: visible;
    }

}

.titlebox
{
    background-color: red;
    padding: 10px 10px 10px 10px;
    width: 100%;
    height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="projectbox" id="project1">
                <div class="titlebox">Project1</div>
                <img src="big_test.jpg">
                <p class="text-container">
                    This is a sample project description. It's not a bad description, but it's short.
                </p>    

                <p class="text-container-mobile">
                   mobile text
                </p>    
            </div>

Answer 3

请使用隐藏的xs类来隐藏移动设备中的描述。类似隐藏的类 - md，hidden-lg等也可用

Answer 4

尝试this

<强> HTML：

<div class="projectbox" id="project1">
    <div class="titlebox">Project1</div>
    <div class="block">
            <img src="yourimage.jpg">
            <p class="text-container">This is a sample project description. It's not a bad description, but it's short.</p>
    </div>
</div>

<强> CSS：

body {
    font-family: Georgia, serif;
}
.projectbox
{
    background-color: greenyellow;
    width: 240px;
    height: 181px;
    cursor: pointer;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
}
.projectbox img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.text-container {
    background-color: rgba(50,50,50,0.5);
    position: absolute;
    top: 0;
    left: 0;
    height: 160px;
    width: 100%;
    margin: 0;
    z-index: 999;       
    padding: 10px;
    margin-top: 20px;
    opacity: 0;
    transition: all ease .3s;
}
.projectbox .block {
    position: relative;
    overflow: hidden;
}
.projectbox .block:hover .text-container {
    margin-top: 0px;
    opacity: 1;
}
.titlebox {
    background-color: red;
    padding: 10px 10px 10px 10px;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
}
@media only screen and (max-device-width: 480px)
{
    .text-container {
        opacity: 1;
        margin: 0;
    }
}

你可以在不使用javascript代码的情况下实现这一点，我已经为动画效果和微小改进做了一些CSS更改。

希望这可以帮助你。

Answer 5

您只需在媒体查询中提供可见性：可见！重要; 。