A：除了悬停的链接之外，所有内容都悬停模糊效果（使用文本阴影）？

Question

我已经看到一些对此的回应，但是努力将其合并到我的代码中。

因此，目前，悬停时的字母会模糊，但是我如何才能使悬停时的字母变为其他字母模糊，而悬停时的字母仍会保持焦点？

沿着这些线。

https://css-tricks.com/hover-on-everything-but/

这是我的代码。

    // append textshadow class to HTML node if supported (Modernizr will do the same)
    if (document.createElement("detect").style.textShadow === "") {
    	document.getElementsByTagName("html")[0].className += " textshadow";
    }

 body
    {	
    	background-color: #eee;
        text-shadow: 12px 12px 8px #000000;
        font-size: 30px;
        color: white; 
    }
    
    
    .textshadow a.blur,
    
    .textshadow a.blur.out:hover, 
    .textshadow a.blur.out:focus 
    {
    	text-decoration: none;
    	color: rgba(0,0,0,0);
    	outline: 0 none;
    
    	-webkit-transition: 400ms ease 100ms;
    	-moz-transition: 400ms ease 100ms;
    	transition: 400ms ease 100ms;
    
    	text-shadow: 0 0 5px white, 12px 12px 8px #000000;
    }
    
    .textshadow a.blur.out,
    
    .textshadow a.blur:hover, 
    .textshadow a.blur:focus
    {
    	text-decoration: none;
    	color: rgba(0,0,0,0);
    	outline: 0 none;
    
    	-webkit-transition: 400ms ease 100ms;
    	-moz-transition: 400ms ease 100ms;
    	transition: 400ms ease 100ms;
    
    	text-shadow: 0 0 0 white, 12px 12px 8px #000000;
    }
    
    a:link {
        text-decoration: none;
    }
    
    a:visited {
        text-decoration: none;
        color: white;
    }
    
    a:hover {
        text-decoration: none;
    }
    
    a:active {
        text-decoration: none;
    }

    <section class="basilswan">
    <div class="basilswan-b"><a href="http://sarahboulton.co.uk" class="blur out">B</a></div>
    <div class="basilswan-a"><a href="http://sarahboulton.co.uk" class="blur out">a</a></div>
    <div class="basilswan-s"><a href="http://sarahboulton.co.uk" class="blur out">s</a></div>
    </section>    

Answer 1

诀窍是在父事件上捕获悬停事件，然后选择所有未悬停的子代。您可以这样做：.parent:hover child:not(:hover)。

这是我在以下代码段中所做的唯一更改。但是，您应该注意，代码中的父节使用了整个宽度，因此，当鼠标悬停在文本的右侧时，所有内容都会变得模糊。但是我想您的布局不是最终的，无论如何这都是水平的（如菜单）。

// append textshadow class to HTML node if supported (Modernizr will do the same)
    if (document.createElement("detect").style.textShadow === "") {
    	document.getElementsByTagName("html")[0].className += " textshadow";
    }

body
    {	
    	background-color: #eee;
        text-shadow: 12px 12px 8px #000000;
        font-size: 30px;
        color: white; 
    }
    
    
    .textshadow a.blur,
    
    .basilswan:hover a.blur.out:not(:hover)
    {
    	text-decoration: none;
    	color: rgba(0,0,0,0);
    	outline: 0 none;
    
    	-webkit-transition: 400ms ease 100ms;
    	-moz-transition: 400ms ease 100ms;
    	transition: 400ms ease 100ms;
    
    	text-shadow: 0 0 5px white, 12px 12px 8px #000000;
    }
    
    .textshadow a.blur.out,
    
    .textshadow a.blur:hover, 
    .textshadow a.blur:focus
    {
    	text-decoration: none;
    	color: rgba(0,0,0,0);
    	outline: 0 none;
    
    	-webkit-transition: 400ms ease 100ms;
    	-moz-transition: 400ms ease 100ms;
    	transition: 400ms ease 100ms;
    
    	text-shadow: 0 0 0 white, 12px 12px 8px #000000;
    }
    
    a:link {
        text-decoration: none;
    }
    
    a:visited {
        text-decoration: none;
        color: white;
    }
    
    a:hover {
        text-decoration: none;
    }
    
    a:active {
        text-decoration: none;
    }

<section class="basilswan">
    <div class="basilswan-b"><a href="http://sarahboulton.co.uk" class="blur out">B</a></div>
    <div class="basilswan-a"><a href="http://sarahboulton.co.uk" class="blur out">a</a></div>
    <div class="basilswan-s"><a href="http://sarahboulton.co.uk" class="blur out">s</a></div>
    </section>