Question

悬停时，我正在使用转换来增加平滑图标。但问题是，当我将鼠标拖出图标时，它会立即恢复正常大小。我不知道如何通过减少图标来做同样的事情。我的意思是当我将鼠标拖出图标时，它应该转到正常大小并且具有相同的平滑过渡（不是即时）。我希望你能理解我。这是我的代码：

li {
  display: inline;
  margin-left: 2.5vh;
	margin-right: 2.5vh;
}

.facebook:hover{
  cursor: pointer;
  transform: scale(0.8);
  transition: all .2s ease-in-out 0s;
  -webkit-transform: all .2s ease-in-out 0s;
}

.instagram:hover{
  cursor: pointer;
  transform: scale(0.8);
  transition: all .2s ease-in-out 0s;
  -webkit-transform: all .2s ease-in-out 0s;
}

.dribble:hover{
  cursor: pointer;
  transform: scale(0.8);
  transition: all .2s ease-in-out 0s;
  -webkit-transform: all .2s ease-in-out 0s;
}

.facebook, .instagram, .dribble {
  transform: scale(0.65);
  -webkit-transform: scale(0.65);
}

<a target="_blank" href="#"><li><img src="http://icons.iconarchive.com/icons/danleech/simple/64/facebook-icon.png" class="facebook"></li></a>
			<a target="_blank" href="#"><li><img src="https://awesomeshop.target.com/img/instagram_logo.png" class="instagram"></li>
			<a target="_blank" href="#"><li><img src="https://cdn.dribbble.com/assets/favicon-63b2904a073c89b52b19aa08cebc16a154bcf83fee8ecc6439968b1e6db569c7.ico" class="dribble"></li>

Answer 1

您必须将过渡属性放在图标上，这样它不仅可以在悬停时使用。

'101'

li {
  display: inline;
  margin-left: 2.5vh;
	margin-right: 2.5vh;
}

.facebook:hover{
  cursor: pointer;
  transform: scale(0.8);
  -webkit-transform: all .2s ease-in-out 0s;
}

.instagram:hover{
  cursor: pointer;
  transform: scale(0.8);
  -webkit-transform: all .2s ease-in-out 0s;
}

.dribble:hover{
  cursor: pointer;
  transform: scale(0.8);
  -webkit-transform: all .2s ease-in-out 0s;
}

.facebook, .instagram, .dribble {
  transform: scale(0.65);
  -webkit-transform: scale(0.65);
  transition: all .2s ease-in-out 0s;
}

Answer 2

您错过了正常图片的过渡属性。请遵循w3标准使用元素。 <a>标记应位于<li>标记内。

li {
  display: inline;
  margin-left: 2.5vh;
	margin-right: 2.5vh;
}
.facebook:hover,.instagram:hover,.dribble:hover{
  cursor: pointer;
  transform: scale(0.8);
  transition: all .2s ease-in-out 0s;
  -webkit-transform: all .2s ease-in-out 0s;
}

.facebook, .instagram, .dribble {
   transform: scale(0.65);
   -webkit-transform: scale(0.65);
   transition: all .2s ease-in-out 0s;
  -webkit-transform: all .2s ease-in-out 0s;
}

<li>
  <a target="_blank" href="#">
    <img  src="http://icons.iconarchive.com/icons/danleech/simple/64/facebook-icon.png" class="facebook">
   </a>
</li>
<li>
   <a target="_blank" href="#">
     <img src="https://awesomeshop.target.com/img/instagram_logo.png" class="instagram">
     </a>
 </li>
<li>
   <a target="_blank" href="#">
      <img src="https://cdn.dribbble.com/assets/favicon-63b2904a073c89b52b19aa08cebc16a154bcf83fee8ecc6439968b1e6db569c7.ico" class="dribble">
    </a>
 </li>

Answer 3

您错过了以下的过渡属性：

from bs4 import BeautifulSoup
import time
import progressbar
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import Select
from selenium.webdriver.support.ui import WebDriverWait
from selenium.common.exceptions import TimeoutException
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait as wait

driver = webdriver.Firefox()
url = 'https://www.parlament.ch/de/ratsbetrieb/suche-curia-vista'
driver.get(url)

bar = progressbar.ProgressBar()

for elem, i in zip(range(0,5489), bar(range(5489))):
    driver.switch_to.default_content()
    html = BeautifulSoup(driver.page_source, 'html5lib')

    file = open('myfolder/' + str(elem) + ".txt", "w")
    file.write(str(html))
    file.close()

    time.sleep(1.5)
    driver.find_element_by_id('PageLinkNext').click()

    time.sleep(0.02)

图标悬停减少过渡

3 个答案: