CSS转换没有休假

-2

我想要过渡，如果我走出元素，但它没有工作。它直接回到原来的CSS。只是悬停为我工作。CSS转换没有休假

$(function() { 
 

 
    $(".neuesTicketSpalte").hover(
 
    function() { 
 
     $(".textNeuesTicket").text("Erstelle ein neues Ticket"); 
 
    }, 
 
    function() { 
 
     $(".textNeuesTicket").text("Neues Ticket"); 
 
    } 
 
); 
 

 
});

.neuesTicketSpalte .panelNeu { 
 
    transition: border-left 1s ease; 
 
} 
 

 
.neuesTicketSpalte:hover .panelNeu { 
 
    display: inline-block; 
 
    border-top: 50px solid transparent; 
 
    border-left: 80px solid rgba(46, 143, 143, 1); 
 
    border-bottom: 50px solid transparent; 
 
    font-size: 0.3em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="neuesTicketSpalte"> 
 
    
 
    <div class="panelNeu" title="Erstelle schnell ein neues Ticket"> 
 
     <p class="textNeuesTicket" style="font-size:5.0em; margin:auto auto;display: inline-block;">Neues Ticket 
 
     </p> 
 
    </div> 
 

 
</div>

来源

2017-06-21 Captai-N

你会这么好心来添加相关的HTML，并把它到可运行的Stack Snippet中？有一个编辑器按钮。 – domsson

尝试'过渡：所有1s缓解;' – sTx

已编辑我的帖子@持续 –

首先添加CSS属性框中上浆到正常状态，这样你将保持它的大小。

第二个将已添加到悬停状态的所有边框属性也添加到正常状态。

下面有工作版本的代码，重新编辑你的目的：

<style> 
 
.neuesTicketSpalte .panelNeu { 
 
    transition: border-left 1s ease; 
 
    width:500px; 
 
    height:100px; 
 
    background-color:#FFFF00; 
 
    box-sizing:border-box; 
 
    border-top: 50px solid transparent; 
 
    border-left: 0px solid transparent; 
 
    border-bottom: 50px solid transparent; 
 
    font-size: 0.3em; 
 
    line-height:0.3em; 
 
} 
 

 
.neuesTicketSpalte:hover .panelNeu { 
 
    display: inline-block; 
 
    border-top: 50px solid transparent; 
 
    border-left: 80px solid rgba(46, 143, 143, 1); 
 
    border-bottom: 50px solid transparent; 
 
    font-size: 0.3em; 
 
} 
 
</style> 
 

 
<body> 
 

 
\t <div class="neuesTicketSpalte"> 
 
    \t <div class="panelNeu"> 
 
     \t <p class="textNeuesTicket" style="font-size:5.0em; margin:auto auto;display: inline-block;">Neues Ticket 
 
     </p> 
 
     </div> 
 
    </div> 
 

 
</body>

来源

2017-06-21 13:46:37

您应该添加border-top，border-left和border-bottom属性这两个规则，然后在border过渡以及font-size。另外请注意，您应该删除内联样式并将其添加到您的CSS规则中。

在这里看到：

$(function() { 
 

 
    $(".neuesTicketSpalte").hover(
 
    function() { 
 
     $(".textNeuesTicket").text("Erstelle ein neues Ticket"); 
 
    }, 
 
    function() { 
 
     $(".textNeuesTicket").text("Neues Ticket"); 
 
    } 
 
); 
 

 
});

.neuesTicketSpalte .panelNeu { 
 
    display: inline-block; 
 
    font-size: 5em; 
 
    border-top: 0 solid transparent; 
 
    border-left: 0 solid rgba(46, 143, 143, 1); 
 
    border-bottom: 0 solid transparent; 
 
    transition: border 1s ease, font-size 1s ease; 
 
} 
 

 
.neuesTicketSpalte:hover .panelNeu { 
 
    display: inline-block; 
 
    font-size: 1em; 
 
    border-top: 50px solid transparent; 
 
    border-left: 80px solid rgba(46, 143, 143, 1); 
 
    border-bottom: 50px solid transparent; 
 
    transition: border 1s ease, font-size 1s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="neuesTicketSpalte"> 
 
    <div class="panelNeu" title="Erstelle schnell ein neues Ticket"> 
 
     <p class="textNeuesTicket">Neues Ticket 
 
     </p> 
 
    </div> 
 
</div>

来源

2017-06-21 13:50:07 domsson

.neuesTicketSpalte .panelNeu { 
    transition: border-left 1s ease; 
    display: inline-block; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    border-left: 0px solid; 
    font-size: 0.3em; 
} 

.neuesTicketSpalte:hover .panelNeu { 
    display: inline-block; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    border-left: 80px solid rgba(46, 143, 143, 1); 
    font-size: 0.3em; 
}

你只需要设置的默认样式每个动画属性。

来源

2017-06-21 13:50:49 user5014677

纯CSS解决方案

其实你可以完全放弃了javascript和使用纯CSS：

.panelNeu{ 
 
    position:relative; 
 
    font-size:5em; 
 
    margin:auto; 
 
    display: block; 
 
    height:40px; 
 
    width:100%; 
 
    transition: border ease-in-out 0.2s; 
 
} 
 
.panelNeu{ 
 
    border: 0 solid transparent; 
 
} 
 
.panelNeu::before{ 
 
    content:'Neues Ticket'; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    height:100%; 
 
    width:100%; 
 
    display:block; 
 
} 
 
.neuesTicketSpalte:hover .panelNeu { 
 
    border-top: 50px solid transparent; 
 
    border-left: 80px solid rgba(46, 143, 143, 1); 
 
    border-bottom: 50px solid transparent; 
 
} 
 
.neuesTicketSpalte:hover .panelNeu::before { 
 
    content:'Erstelle ein neues Ticket'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="neuesTicketSpalte"> 
 
    <div class="panelNeu" title="Erstelle schnell ein neues Ticket"></div> 
 
</div>

来源

2017-06-21 14:06:25 Obsidian

CSS转换没有休假

回答

相关问题