Html 使多个鼠标悬停并单击“可缩放”

这对于hover是正确的，但我还想了解另外两件事：

1） 一个更具可伸缩性的通用解决方案：每次我添加链接和成对段落时，我不希望每次添加都包含特定的CSS。似乎我应该能够为每个成对的链接和段落创建相同的行为，并将其应用于所有成对的链接和段落。我所做的似乎效率很低

2） 我还想创建与悬停相同的行为，但只需单击一下，使其具有可伸缩性和通用性（如上面的#1）。所需的行为是单击链接->出现成对的段落，再次单击链接->再次消失成对的段落（或类似的内容）

注意：我想要单击和悬停，因为悬停将适用于桌面，但不适用于手机。如果有人使用智能手机，他们可以使用单击按钮。我希望解决方案具有响应性，避免jQuery，并且仅在可能的情况下使用CSS

以下是我现在拥有的内容（为了简单起见，仅使用两对链接和段落）：

标记：

<a id="a-1">link1</a>
<p id="p-1">para1</p>
<a id="a-2">link2</a>
<p id="p-2">para2</p>

---

下面是一个演示：

更改泛型类的

id

标记

HTML

<a class="a1">link1</a>
<p>para1</p>
<a class="a1">link1</a>
<p>para2</p>

---

您可以将

：target

属性与特定ID结合使用（请参阅）

HTML

---

我相信jQuery解决方案是您唯一的解决方案。对于悬停和触摸事件，您需要关闭单击和绑定触摸。下面是一段脚本，当用户可能使用触摸屏或鼠标时，我在平板电脑大小的导航菜单中使用它。如果您了解js，或许可以修改此脚本以满足您的需要：

function medMenu() {
            //reset the menu in case it's being resized from a small screen
            // unbind click events    
            jQuery('.menuToggle a').off('click');
            jQuery('.topMenu h3').off('click');
            // remove any expanded menus
            jQuery('.expand').removeClass('expand');
            // remove the span tags inside the menu
            jQuery('.topMenu h3').find('span.indicator').remove();
            // remove the "menu" element
            jQuery('.menuToggle').remove();

            //check to see if the device supports touch
            //we'll use touch events instead of click as it will allow us
            //to support both a CSS-driven hover and touch enabled
            //menu for this screen range
            if ('ontouchstart' in document.documentElement)
            {
                //find all 'hover' class and strip them
                 jQuery('.topMenu').find('li.hover').removeClass('hover');
                 //add touch events to submenu headings
                 jQuery(".topMenu h3").bind('touchstart', function(e){
                    //find the current submenu
                    var currentItem = $(this).siblings('.submenu');
                    //remove the expand class from other submenus to close any currently open submenus
                    jQuery('ul.submenu').not(currentItem).removeClass('expand');
                    //open the selected submenu
                    $(this).siblings('.submenu').toggleClass('expand');
                });
                //close submenus if users click outside the menu
                jQuery('html').bind('touchstart', function(e) {
                    jQuery('.topMenu').find('ul.submenu').removeClass('expand');
                });
                //stop clicks on the menu from bubbling up
                jQuery('#mainNav').bind('touchstart', function(e){
                    e.stopPropagation();
               });
            }
            //indicate current window state
            windowState = 'medium';
        }

---

这是您的通用解决方案：

如果使用加号，将选择所有p值，直到找到另一个元素。所以在这种情况下+可以工作

对于移动部件，您可以使用以下选项：

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
    a{
       display: block;
    }
    p{
      display: none;
    }


    a:hover + p {
       display: block;
    }

}


@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) 
{ 
    a{
       display: block;
    }
    p{
        display: none;
    }

    a:active + p {
        display: block;
    }


}

在桌面部分它将触发悬停，在移动部分它将触发点击

例如：

---

---

您是否尝试对元素使用

类

，并计算出元素周围的

CSS

？是的，但它似乎不起作用。请查看我评论中的JSFIDLE链接。它对我有用吗？我知道“+”是诀窍。谢谢那我讨论的点击行为呢？没有Javascript是无法实现的。使用“+”就完全不同了！谢谢！点击行为如何？点击是通过javascript实现的。CSS中没有单击功能。：active与click（）不完全相同？

：active

将作为第一个功能，但当您单击链接时，它将立即隐藏

p

。这取决于单击事件的作用。如果删除

：hover

，它将停止工作。显然，

：focus

和

：hover

的行为方式相同。但是为什么要删除

：hover

？OP要求悬停并单击。最后，

：focus

没有做任何事情。这就是为什么。你所看到的是由于

：hover

，即使你点击了链接。你是对的，我在Chrome上测试了它，但它不起作用。请看我的新答案Eliot Berriot-点击行为并不完全是我想要的，但我认为是有用的，因为点击另一个会隐藏上一个被点击的行为。MelanciaUK-我对这一点不熟悉。你认为艾略特·贝里奥的新答案有什么问题吗？我删除了鼠标悬停，但它仍然可以在单击时工作。OP不希望涉及Javascript或jQuery。这将是一个很好的提示，但不是一个答案。我知道他没有，我在回答中也说了很多。我明确表示，这是另一种选择。另外，我相信js解决方案是他唯一的解决方案。你否决这一点是错误的。这不是唯一的解决办法。正如您所提到的，您可以使用

：target

选择器来实现这一点。是的，对于单击，但我相信OP正在寻找触摸行为，并且假设触摸事件等同于单击事件，事实并非如此。您是对的，单击和触摸实际上是不同的（删除我的下一票）

<a class="focus" href="#p1">

    Click me or hover me

</a>
<p id="p1">I'm hidden</p>
<a class="focus" href="#p2">

    Click me or hover me

</a>
<p id="p2">I'm another hidden paragraph</p>

.focus {
    display: block;
}
.focus:focus, .focus:hover {
    background-color: pink;
}

.focus + p {
    display: none;
}
.focus:hover + p, p:target {
    display: block;
}

function medMenu() {
            //reset the menu in case it's being resized from a small screen
            // unbind click events    
            jQuery('.menuToggle a').off('click');
            jQuery('.topMenu h3').off('click');
            // remove any expanded menus
            jQuery('.expand').removeClass('expand');
            // remove the span tags inside the menu
            jQuery('.topMenu h3').find('span.indicator').remove();
            // remove the "menu" element
            jQuery('.menuToggle').remove();

            //check to see if the device supports touch
            //we'll use touch events instead of click as it will allow us
            //to support both a CSS-driven hover and touch enabled
            //menu for this screen range
            if ('ontouchstart' in document.documentElement)
            {
                //find all 'hover' class and strip them
                 jQuery('.topMenu').find('li.hover').removeClass('hover');
                 //add touch events to submenu headings
                 jQuery(".topMenu h3").bind('touchstart', function(e){
                    //find the current submenu
                    var currentItem = $(this).siblings('.submenu');
                    //remove the expand class from other submenus to close any currently open submenus
                    jQuery('ul.submenu').not(currentItem).removeClass('expand');
                    //open the selected submenu
                    $(this).siblings('.submenu').toggleClass('expand');
                });
                //close submenus if users click outside the menu
                jQuery('html').bind('touchstart', function(e) {
                    jQuery('.topMenu').find('ul.submenu').removeClass('expand');
                });
                //stop clicks on the menu from bubbling up
                jQuery('#mainNav').bind('touchstart', function(e){
                    e.stopPropagation();
               });
            }
            //indicate current window state
            windowState = 'medium';
        }

a{
    display: block;
}
p{
    display: none;
}

a:hover + p {
    display: block;
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
    a{
       display: block;
    }
    p{
      display: none;
    }


    a:hover + p {
       display: block;
    }

}


@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) 
{ 
    a{
       display: block;
    }
    p{
        display: none;
    }

    a:active + p {
        display: block;
    }


}